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之浮动窗口实现代码(两种方法)
Sep 08 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 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/11/27 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
JSON 教程 json入门学习笔记
2020/09/22 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
python获取豆瓣电影简介代码分享
2014/01/16 Python
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
python 剪切移动文件的实现代码
2018/08/02 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
学校经典推荐信
2013/10/30 职场文书
低碳环保演讲稿
2014/08/28 职场文书
市级三好生竞选稿
2015/11/21 职场文书
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python