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 相关文章推荐
javascript iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
Javascript的并行运算实现代码
Nov 19 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
简单的渐变轮播插件
Jan 12 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 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并发访问实例代码
2012/09/06 PHP
基于PHP文件操作的详解
2013/06/05 PHP
php限制文件下载速度的代码
2015/10/20 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
面向初学者的Python编辑器Mu
2018/10/08 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
python用post访问restful服务接口的方法
2018/12/07 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
结构和类有什么异同
2012/07/16 面试题
公司会计岗位职责
2014/02/13 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
nginx优化的六点方法
2021/03/31 Servers
html5表单的required属性使用
2021/07/07 HTML / CSS
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS