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

1、问题描述

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

而后发如今webpack构建后的一个js里面的图片连接是个乱码。

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

2、问题缘由

咦，怎么回事呢？ 为啥源码的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"

3、解决办法

那怎么解决呢？ 咱们能够把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会自动去处理咱们的依赖。