VUE打包图片加载失败问题
VUE打包图片加载失败问题
全栈程序员站长
发布于 2022-08-22 11:26:19
发布于 2022-08-22 11:26:19
代码可运行
运行总次数：0
代码可运行
大家好，又见面了，我是你们的朋友全栈君。
昨天的搬运工，今天的小雷锋。
问题描述，使用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)发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/136940.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年5月5，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
