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


Posted in Javascript onFebruary 21, 2018

1、问题描述

在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到(404错误),这些图片可以是以src引入的图片, 也可以是css中定义的背景图片。图片能否显示与你的静态资源文件存在位置和引入的路径直接相关,下面是我的其中一个项目的文件存放以及路径书写方式!

2、解决方法之一

静态资源static存放位置放在src目录下

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

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

你可能会问为什么放在src目录下?放在跟src同级目录下不可以吗?好吧,一开始我也是放在src同级目录下,但是在某个css文件中引入背景图片的时候打包之后图片失效,我是这样引入的

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

实践证明这个写法是错误的,这个会在你打包的时候直接抱一大堆错(如css-loader错误),连项目都跑不起来。

于是我用下面的写法:

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

这种写法也是不可以的,原因是你的静态资源文件static不在src目录,而在vue中src目录是相对根目录是src目录,所以如果你想用上面的写法,必须要把static放在src目录下。如上面图一图二

注意:不能把static/images/user.png写成 /static/images/user.png,否则图片还是失效。

以上是关于文件存放位置以及css中引入图片问题,如果是通过img标签引入图片的话,相对简单,直接写绝对地址就行了,并且静态资源static文件夹的位置可以在src里面,也可以放在与src同级下,但是为了不出现上面情况,放在src里面即可!

img引入图片:

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

以上是一种解决图片失效问题的方法,当然,如果非要把static静态资源目录放在与src同级目录下,也是有解决方法,例如通过导入图片的方式(本人未实践),可以自行尝试!

这篇解决vue打包之后静态资源图片失效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Prototype 对象扩展
May 15 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
Vue项目中设置背景图片方法
Feb 21 #Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 #Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 #Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 #jQuery
Angular实现的进度条功能示例
Feb 18 #Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 #Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 #Javascript
You might like
php中smarty模板条件判断用法实例
2015/06/11 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
英语国培研修感言
2014/02/13 职场文书
任命书怎么写
2014/06/04 职场文书
商场租赁意向书
2014/07/30 职场文书
个人剖析材料范文
2014/09/30 职场文书
办理信用卡工作证明
2014/09/30 职场文书
服务整改报告
2014/11/06 职场文书
先进班集体事迹材料
2014/12/25 职场文书
卖车协议书范文
2016/03/23 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
Django基础CBV装饰器和中间件
2022/03/22 Python
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android