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

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')
    }]
  }
}
...

{
  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]`
          }
        }
      }
    }
  ]
},

<img src="../assets/test.png" />