webpack中img标签的src使用相对路径的方法

webpack目前已经是大部分前端项目打包工具的首选,但是在使用的过程中还是存在一些问题。我们下面要讲到的就是常见的关于图片路径的问题。

tips: 解决方案在最后一节

img的src问题及其原因

在webpack项目中,如果要直接使用 imgsrc 属性来引用图片,由于webpack对html中图片的相对路径的处理方式的问题发现图片并不能正确的引用。webpack对图片的处理方式如下:

官方文档

默认情况下,vue-loader 使用 css-loaderVue 模版编译器自动处理样式和模版文件。在编译过程中,所有的资源路径例如 <img src="...">background: url(...)@import 会作为模块依赖。
例如,url(./image.png) 会被转换为 require('./image.png'),而

<img src="../image.png">

将会编译为:

createElement('img', { attrs: { src: require('../image.png') }})

常见的解决方案及不足

在日常的项目中,如果某处样式需要使用图片,那我们常见的处理方法一般有几种:

1、 使用css background 来使用图片

不足:需要使用其他标签来替换img标签

.img {
  background-image: url('../assets/test.png');
}

这种方式一般webpack的配置中有使用 url-loader 来处理图片资源,小于一定尺寸的图片会被编译成base64内嵌在样式中。正常的图片都会被正确的打包到指定文件夹。
2、 使用 require 的方式引入图片,并将其动态绑定到src上面。

不足:需要没张图片都使用require引入

例如:

<img :src="imgs[0].src" />
data () {
  return {
    imgs: [{
      src: require('../assets/test.png')
    }]
  }
}
...

3、 使用图床,提前将图片资源上传至服务器,src中直接使用图床的图片地址即可。

不足:需要搭建图床,并且也可能存在测试环境和生产环境地址不一的问题

修改webpack配置,直接使用相对路径

在某些时候,我们必须要使用img标签,那么这时候,我们只能采用上面方案中的第2或3种,第2种的代码略显臃肿,第3种又需要构建图床。如果对于 webpackurl-loader 的文档有仔细阅读的话我们可以发现通过修改webpack配置完全可以支持我们在src中直接使用相对路径。

{
  test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 1024 * 4,
        esModule: false,
        fallback: {
          loader: require.resolve('file-loader'),
          options: {
            name: `img/[name].[hash:8].[ext]`
          }
        }
      }
    }
  ]
},

这种方式会将我们在src中的图片复制到打包后文件夹下的img文件夹内并添加hash值,这时候我们在代码中就可以直接使用相对路径了。例如:

<img src="../assets/test.png" />
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » webpack中img标签的src使用相对路径的方法

发表评论

提供最优质的资源集合

立即查看 了解详情