vue项目打包后加载不到图片,vue背景图片加载不出来
本文主要介绍了如何解决Vue项目建立后图片无法加载的问题。有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
无法加载Vue项目的构建图片。1.在config/index.js文件中。2.在webpack.prod.conf.js文件中。3.添加公共路径：./.在utils.js文件中。有些图片在Vue项目打包后不会显示。
Vue项目build图片加载不出来
Vue项目，构建后，图像将被处理。具体的处理方法在文件webpack.base.conf.js中，代码如下：
模块：{
规则：[
{
测试：/\。(pngjpe？ggifsvg)(\？*)?$/,
加载程序：“url加载程序”，
选项：{
限制：10000，//1k-限制文件大小。
名称：utils.assetsPath(img/[name])。【哈希：7】。[分机])
}
}
]
}
在上面的代码中，url-loader用于限制图片的大小。在限制范围内，webpack会将图片转换为base64。如果超出限制，它将被移交给文件加载器进行处理。
如果在极限范围内，就不会出现图片无法加载的情况；
如果超出限制，webpack会将处理后的图像放入dist/static/img/，加载的图像将不会显示。具体做法如下：
1.在config/index.js文件内
修改代码：(列出index.js的部分代码)
构建：{
//index.html的模板
index: path.resolve(__dirname，./dist/index.html )，
//路径
assets root:path . resolve(_ _ dirname，./dist )，
资产子目录：静态，
assetsPublicPath:“”。/,
}
assetsPublicPath字段的值从以前的“/”更改为“”。/;
2.在webpack.prod.conf.js文件内
输出字段，添加代码(公共路径：。/):
输出：{
公共路径：“”。/，//添加了代码
路径：config.build.assetsRoot，
文件名：utils.assetsPath(js/[name])。【chunkhash】。js’)，
chunk filename:utils . assets path( js/[id])。【chunkhash】。js’)
},
3.在utils.js文件里添加 publicPath:../../
代码如下：
//(这是生产构建期间的情况)
if (options.extract) {
return extract text plugin . extract({
用途：装载机，
回退：“vue样式加载器”，
公共路径： ././ //添加了代码
})
}否则{
返回[vue-style-loader]。concat(加载程序)
}
完成上述步骤后，执行命令：npm run build。
构建完成后，dist中index.html页面的link和script标签的引入路径成为相对路径；同时，相关图片路径也变成相对路径，并且当部署项目时，图片路径404不出现。
Vue项目打包后部分图片不显示
1.图片的后缀名称不能包含广告字母的敏感词(即谷歌会认为是广告，自动删除)
2.图片本身的原因(质量)与前端无关。你需要让UI给出新的设计图片。-备注：QQ截图直接到本地图片打包后可能无法显示，需要从UI获取设计原图。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。