一、问题描述
今天日常检查网站时发现一个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会自动去处理我们的依赖。