下面我就为大家分享一篇解决vue打包之后静态资源图片失效的问题，具有很好的参考价值，希望对大家有所帮助。
1、问题描述
在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到（404错误），这些图片可以是以src引入的图片， 也可以是css中定义的背景图片。图片能否显示与你的静态资源文件存在位置和引入的路径直接相关，下面是我的其中一个项目的文件存放以及路径书写方式！
2、解决方法之一
静态资源static存放位置放在src目录下
立即学习“前端免费学习笔记（深入）”；
你可能会问为什么放在src目录下？放在跟src同级目录下不可以吗？好吧，一开始我也是放在src同级目录下，但是在某个css文件中引入背景图片的时候打包之后图片失效，我是这样引入的
实践证明这个写法是错误的，这个会在你打包的时候直接抱一大堆错（如css-loader错误），连项目都跑不起来。
于是我用下面的写法：
这种写法也是不可以的，原因是你的静态资源文件static不在src目录，而在vue中src目录是相对根目录是src目录，所以如果你想用上面的写法，必须要把static放在src目录下。如上面图一图二
注意：不能把static/images/user.png写成 /static/images/user.png，否则图片还是失效。
以上是关于文件存放位置以及css中引入图片问题，如果是通过img标签引入图片的话，相对简单，直接写绝对地址就行了，并且静态资源static文件夹的位置可以在src里面，也可以放在与src同级下，但是为了不出现上面情况，放在src里面即可！
img引入图片：
以上是一种解决图片失效问题的方法，当然，如果非要把static静态资源目录放在与src同级目录下，也是有解决方法，例如通过导入图片的方式（本人未实践），可以自行尝试！
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
根据webpack配置中导致字体图标无法显示的解决方法（详细教程）
以上就是如何解决vue打包后静态资源图片失效的问题的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
926
收藏
