vue打包后，图片不显示，img路径404

最新推荐文章于 2025-11-15 08:27:25 发布

原创最新推荐文章于 2025-11-15 08:27:25 发布 · 1.6w 阅读

11 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

25 篇文章

订阅专栏

本文详细解析了Vue项目在打包后图片无法显示的问题，主要原因是webpack更改了图片引用路径。阐述了不同场景下图片引入方式的变化，并提供了解决方案，包括修改配置文件以确保正确路径。

vue打包后，背景图片不显示了

遇到的问题：开发时图片好好的，打包后，图片不显示，如下图，转盘背景图没有了：
在这里插入图片描述
首先，说一下项目里图片引入的三种方式：

在页面中，通过<img src=''>路径"属性；
在css文件中，通过背景图片的url('路径')引入图片；
在js中通过require('路径')引入图片；

造成图片找不到的原因主要是：webpack打包以后，生成一个目录/static和一个index.html文件，会改变这几种图片引入的路径。

具体改变如下：

在页面中和js中，改变是一样的，直接将路径直接改为‘static/img/XXX.png’，所以，如果是在页面中或者js中引入的图片，正常打包后，没有问题正常显示；

//.wheel-pointer {
//  background: url("../../assets/img/draw_btn.png") no-repeat center top;
//}
//打包后如下：
.wheel-pointer[data-v-bb1116d8] {
    background: url(../../static/img/draw_btn.f43e809.png) no-repeat top;
}

在css中，是将路径中的文字路径替换为‘static/img’，这样替换一定会出现问题，因为在打包好的文件中就只有两层目录‘../../’就不知道返回到什么目录下面去了；
注意url中的路径改变，图片展示如下，
– 打包前的样式：

– 打包后的样式

其原理就是不管哪种方式都去static/img下寻找图片。
在这里插入图片描述

解决方案

在这里插入图片描述
在build/utils.js中添加好参数保存后，重新打包上传到服务器，再运行图片就出现了：

该文章为记录自己遇到的问题所用，如果有什么错误，欢迎指出。
【补充】：
遇到问题：打包后的路径少了一层项目名，导致404
解决方法：在config/index.js下的build里，修改assetsPublicPath: '/确实的路径name/'
参考链接：https://blog.youkuaiyun.com/qq_30346089/article/details/77947998
在打包即可