昨天的搬运工,今天的小雷锋。
问题描述,使用VUE-CLI打包后,出现图片无法显示情况。这里可能存在两种情况:
- 静态资源CSS中使用图片作为背景图片使用时。
- 在JS中生成图片标签后,再设置图片路径时。
当你吃着火锅唱着歌,一路npm-run-dev都相安无事的时候,打包完事后,发现突然图片显示异常了!
如果你观察后,你会发现组件中使用的img标签都没任何问题,我们css中的背景图片以及在js中后加载的图片无法正常显示。
这时候就已经可以发现不是图片本身出现的问题了。
<img src="这种没有问题">
background: url(../../../static/img/这种可能会出现问题.png);
let imgAge = document.createElement("img");
imgAge.src = '../../static/img/这种也可能会出现问题.png';
_this.appendChild(imgAge)
解决
当我们看过报错信息后会发现,是因为图片的路径问题,在statich后面多加了两层文件,而他们是不存在的,这就导致了无法找到图片正确的路径。
更改build/utils.js
文件中的 ExtractTextPlugin 的 options配置项.
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', //注意: 此处根据路径, 自动更改
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
对于第二种情况,需要修改src的获取方式:用require请求即可。
let imgAge = document.createElement("img");
imgAge.src = require('../../static/img/icon_s@2x.png')
_this.appendChild(imgAge)