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

1. img 的 src 问题及其原因
2. 常见的解决方案及不足
3. 修改 webpack 配置，直接使用相对路径

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

tips: 解决方案在最后一节

img 的 src 问题及其原因

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

官方文档

默认情况下，vue-loader 使用 css-loader 和 Vue 模版编译器自动处理样式和模版文件。在编译过程中，所有的资源路径例如 <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 种又需要构建图床。如果对于 webpack 的url-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" />