昨天的搬运工，今天的小雷锋。
问题描述，使用VUE-CLI打包后，出现图片无法显示情况。这里可能存在两种情况：
静态资源CSS中使用图片作为背景图片使用时。
在JS中生成图片标签后，再设置图片路径时。
当你吃着火锅唱着歌，一路npm-run-dev都相安无事的时候，打包完事后，发现突然图片显示异常了！
如果你观察后，你会发现组件中使用的img标签都没任何问题，我们css中的背景图片以及在js中后加载的图片无法正常显示。
这时候就已经可以发现不是图片本身出现的问题了。
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)
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/hz/148195.html