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 相关文章推荐
input的focus方法使用
Mar 13 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
Jquery下:nth-child(an+b)的使用注意
May 28 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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的面向对象编程
2006/10/09 PHP
用PHP读取IMAP邮件
2006/10/09 PHP
php smarty函数扩展
2010/03/15 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
php过滤敏感词的示例
2014/03/31 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
python黑魔法之参数传递
2016/02/12 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
母校寄语大全
2014/04/10 职场文书
环保建议书300字
2014/05/14 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
社保委托书怎么写
2014/08/02 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
质检员岗位职责
2015/02/03 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
大学运动会通讯稿
2015/07/18 职场文书
python tkinter模块的简单使用
2021/04/07 Python
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫