vue打包之后静态资源图片失效问题
来源:互联网 发布:javascript表单提交 编辑:程序博客网 时间:2024/04/29 17:11
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同级目录下,也是有解决方法,例如通过导入图片的方式(本人未实践),可以自行尝试!
0 0
- vue打包之后静态资源图片失效问题
- vue.js使用手记——打包之后静态资源失效404问题
- 用webpack打包vue项目后,静态资源路径失效问题
- vue-cli 打包找不到 css 资源或者图片资源问题
- vue之项目静态资源打包
- iOS静态库中打包图片资源
- iOS静态库中打包图片资源
- iOS静态库中打包图片资源
- 关于Vue背景图打包之后访问路径错误问题
- 记录 vue-cli build 打包之后的问题
- vue build打包之后首页白屏的问题
- iOS在静态库中打包图片资源
- vue 打包的问题
- 在vue中用webpack打包之后运行文件问题以及相关配置
- vue小笔记 打包之后,刷新页面出现404的问题
- webpack对静态资源打包
- spring mvc 静态资源引用css,js,images样式失效问题
- web项目静态资源诸如图片等上传引用问题
- CodeForces
- 赫夫曼树与赫夫曼编码
- 我有一个秘密
- Linux初级学习第十二单元
- [Java]Stack栈和Heap堆的区别
- vue打包之后静态资源图片失效问题
- 安卓开发 :实现打开一次相机连续拍多张照片返回后拿到多张照片,一个小功能的构思
- CDH集群报一个DataNode未连接上的错误
- LINUX内核线程
- Caffe在Ubuntu下配置
- 我在梦里见过你
- HDU 2004
- Eigen库数据结构内存对齐问题
- PhpStorm+Xampp+Xdebug配置