vue css 引入asstes中的图片无法显示的四种解决方法


Posted in Javascript onMarch 16, 2020

这里主要针对的是vuecli2中的一些问题。
vue项目中,常常会有很多的图片资源,这样的资源存放位置,通常我们有两个选择:1. static,2. assets
关于这两者之间的区别,和如何选择这里就不多说了!
这里我们来说说assets目录下存放图片时,在vue组件的css样式中引入图片时将会遇到的一些问题!
正常情况,我们在本地开发调试的时候,无论什么样的方式引入图片都不会有问题。但是,一大包发布打线上,就会出现图片无法加载的情况!
这是因为,出于某些原因,有人修改了config目录下的index.js文件中的build对象中assetsPublicPath的值,这个值初始化的时候是 斜杆(/),代表资源根目录,也就是dist目录下与index.html文件同级。

所以:

第一种方法

修复的方法就是把这个值改回默认值:/

vue css 引入asstes中的图片无法显示的四种解决方法

打包出来的结果: css文件中background属性

vue css 引入asstes中的图片无法显示的四种解决方法

index.html中的js和css文件

vue css 引入asstes中的图片无法显示的四种解决方法

第二种方法

还是修改这个值斜杠代表的是根目录,我们换种思路,是不是可以把这里该为绝对地址呢?答案肯定是可以的具体怎么改呢?举个例子,比如我的线上的项目的地址是:http://www.test.com,我们只需要吧之前的斜杠替换成这个地址就可以了,如图:

vue css 引入asstes中的图片无法显示的四种解决方法

打包出来的结果: css文件中background属性

vue css 引入asstes中的图片无法显示的四种解决方法

index.html中的js和css文件

vue css 引入asstes中的图片无法显示的四种解决方法

第三种方法

上面也说了,可能由于某些原因我们修改了这个值,为了不影响原有的功能,也是避免造成别新的bug,我们不能修改这个值,所以我们有了第三种方法。修改build目录中的uitls文件中的css打包配置,打开utils.js文件直接搜索 ExtractTextPlugin.extract 然后在对象中添加属性 publicPath: ‘…/…/' 具体如图:

vue css 引入asstes中的图片无法显示的四种解决方法

这里的层级(publicPath: ‘…/…/' )具体看你打包后的目录结构,我这里的层级如下图,各自根据自己的情况确定

vue css 引入asstes中的图片无法显示的四种解决方法

这个时候打包出来的路径,根据你的assetsPublicPath配置而定了,这里就不举例了,执行查看是否打包正常。

第四种方法

前面三种方案都是说的老项目,已经大量的图片引入,没有办法了。但是若果图片资源不多,或者是新项目,这个时候的话不需要这么麻烦去改打包配置。我们可以从一开始就避免这个问题。对于html中的img标签我们可以通过import的方式先把图片引入,然后放到data中,在绑定到src上。

import logo from "../assets/logo.png";
data() {
 return {
 logo,
 };
},
<img :src="logo" width="78" height="78" alt="logo">

css中的路径我们可以通过@来引入(@等价于src目录)比如:

background: url("@/assets/logo.png") no-repeat;

又或者,直接不要放到asstes目录下,也可以避免这个问题发生。

总结

到此这篇关于vue css 引入asstes中的图片无法显示的四种解决方法的文章就介绍到这了,更多相关vue css 引入asstes 图片内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS控制表格隔行变色
Jun 26 Javascript
在线游戏大家来找茬II
Sep 30 Javascript
求解开jscript.encode代码的asp函数
Feb 28 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
JS实现长图上下滚动效果
Mar 19 Javascript
JS函数本身的作用域实例分析
Mar 16 #Javascript
JavaScript实现tab栏切换效果
Mar 16 #Javascript
vue-cli3使用mock数据的方法分析
Mar 16 #Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 #Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 #Javascript
JavaScript实现动态留言板
Mar 16 #Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 #Javascript
You might like
解析PHP高效率写法(详解原因)
2013/06/20 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
Python中的Matplotlib模块入门教程
2015/04/15 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
python监控文件并且发送告警邮件
2018/06/21 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
浅析Python迭代器的高级用法
2020/07/16 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
纽约手袋品牌:KARA
2018/03/18 全球购物
公务员职务工作的自我评价
2013/11/01 职场文书
高中政治教学反思
2014/01/18 职场文书
初中科学教学反思
2014/01/21 职场文书
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
中文专业求职信
2014/06/20 职场文书
出差报告格式模板
2014/11/06 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
毕业实习感受与体会
2015/05/26 职场文书