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 相关文章推荐
jquery遍历input取得input的name
Apr 27 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
用js编写留言板
Mar 17 Javascript
javascript实现画板功能
Apr 12 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
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与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
jQuery使用技巧简单汇总
2013/04/18 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
Python3读取文件常用方法实例分析
2015/05/22 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
灵泰克Java笔试题
2016/01/09 面试题
申报职称专业技术个人的自我评价
2013/12/12 职场文书
高中军训感想300字
2014/03/04 职场文书
保险公司年会主持词
2014/03/22 职场文书
春季防火方案
2014/05/10 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
周一给客户的问候语
2015/11/10 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle
JS Canvas接口和动画效果大全
2021/04/29 Javascript