html插入图片路径乱码,webpack打包 html模板中img路径乱码问题

一、问题描述

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

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

复制代码

二、问题原因

咦，怎么回事呢？ 为啥源码的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')}。具体代码如下。

复制代码

构建后的结果为：

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