webpack打包 html模板中img路径乱码问题

一、问题描述

今天日常检查网站时发现一个404错误，错误信息如下。

然后发现在webpack构建后的一个js里面的图片链接是个乱码。

 <img src="" class="service__chat__photo">
复制代码

二、问题原因

咦，怎么回事呢？ 为啥源码的src为空，线上构建后是个乱码呢？ 是不是代码没同步呢？ 小编果断更新本地代码，然后再构建下，构建后dist目录还是乱码链接。那是只有可能是webpack构建过程中导致的乱码。
查看webpack的配置文件，配置文件如下，该只有一个 html-loader 会处理该文件，所以肯定html-loader用的有点问题。

{
    test: /\.tmpl$/,
    exclude: /node_modules/,
    use: [{
        loader: 'html-loader',
        options: {
            minimize: false,
            interpolate: true
        }
    }]
}
复制代码

上webpack官网查html-loader发现，html-loader的官网解释如下：

默认情况下，每个本地的 img 标签都需要通过 require （require('./image.png')）来进行加载。你可能需要在配置中为图片指定 loader（推荐 file-loader 或 url-loader ） 你可以通过查询参数 attrs，来指定哪个标签属性组合(tag-attribute combination)应该被此 loader 处理。传递数组或以空格分隔的 : 组合的列表。（默认值：attrs=img:src）

原来html-loader默认都会对img标签的src属性，require去解析src对应的链接。,所以我们页面中的src=""被解析成了src="xxxHTMLLINKxxx0.255155626507101550.49119297348931346xxx"

三、解决办法

那怎么解决呢？ 我们可以把html中的attrs设置为false，修改后的配置如下。

{
    test: /\.tmpl$/,
    exclude: /node_modules/,
    use: [{
        loader: 'html-loader',
        options: {
            minimize: false,
            interpolate: true,
            attrs: false
        }
    }]
}
复制代码

这样webpack在构建过程就不会再去加载处理我们的src属性。 但是有的小伙伴有会问，我的图片图片路径有些需要webpack去处理，有些不需要怎么办呢？也是有办法的，需要webpack处理的图片链接使用${require('~assets/xxx.png')}。具体代码如下。

<!-- 需要webpack处理的链接 -->
<img src="${require('~assets/components/serviceBar/chat_bg.jpg')}" class="service__chat__photo">

<!-- 不需要webpack处理的图片链接 -->
<img src="./test.png" class="service__chat__photo">
复制代码

构建后的结果为：

<img src=\"" + __webpack_require__(230) + "\" class=\"service__chat__photo\">\n                <img src=\"./test.png\" class=\"service__chat__photo\">\n 
复制代码

attrs属性还可以指定img的某个属性需要经过require的处理。 这个大有用处的。比如说我们页面图片太多，要使用懒加载，懒加载读取的是data-src的属性。我们就可以设置attrs:[:data-src]，在模板上data-src属性使用相对路径，webpack会自动去处理我们的依赖。