解决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 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 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
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
PHP attributes()函数讲解
2019/02/03 PHP
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
解决uWSGI的编码问题详解
2017/03/24 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
替换python字典中的key值方法
2018/07/06 Python
python调用java的jar包方法
2018/12/15 Python
Django web框架使用url path name详解
2019/04/29 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
求职信模版
2013/11/30 职场文书
数学检讨书1000字
2014/02/24 职场文书
校外活动方案
2014/08/28 职场文书
教师外出学习心得体会
2016/01/18 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
Python实现归一化算法详情
2022/03/18 Python