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 相关文章推荐
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
Angular路由简单学习
Dec 26 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
vue-router 路由传参用法实例分析
Mar 06 Javascript
通过JS判断网页是否为手机打开
Oct 28 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
基于mysql的论坛(3)
2006/10/09 PHP
两个php日期控制类实例
2014/12/09 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
js树形控件脚本代码
2008/07/24 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
使用p5.js临摹动态图片
2019/11/04 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
统计岗位职责
2014/02/21 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
小学生家长寄语
2014/04/02 职场文书
小学生期末评语
2014/04/21 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
父亲节寄语大全
2015/02/27 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技
app场景下uniapp的扫码记录
2022/07/23 Java/Android