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 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
js+h5 canvas实现图片验证码
Oct 11 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
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
php自定义session示例分享
2014/04/22 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
php cookie 详解使用实例
2016/11/03 PHP
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
python中List的sort方法指南
2014/09/01 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
python判断链表是否有环的实例代码
2020/01/31 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
html5 canvas 使用示例
2010/10/22 HTML / CSS
自荐信格式的六要素
2013/09/21 职场文书
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
在校学生职业规划范文
2014/01/08 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
城南旧事电影观后感
2015/06/16 职场文书
个人欠条范本
2015/07/03 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
Oracle笔记
2021/04/05 Oracle