解决vue打包之后静态资源图片失效的问题_vue打包后静态资源图片失效资源-CSDN文库

vue打包静态资源

152 浏览量 2020-08-28 00:03:03 上传评论收藏 98KB PDF 举报

资源推荐

资源详情

资源评论

解决解决vue打包之后静态资源图片失效的问题打包之后静态资源图片失效的问题

下面小编就为大家分享一篇解决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标签引入图片的话，相对简单，直接写绝对地址就行了，

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

weixin_38612527

粉丝: 5
资源: 954

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip