vue中background-image图片路径问题
按照以往在css文件中写background:url('图片路径'),完成后加载竟然显示出错,起初以为路径不对,检查了几遍,仍然没有问题。最后百度找答案,发现不少同行都遇到过这种问题,遂记录下自己所采用的解决方式:
data () {
return {
img: require('你的图片路径')
}
}
div的写法:
<div :style="{backgroundImage: 'url(' + img + ')'}">
</div>
更简便的写法:
<div :style="{backgroundImage:`url(${img})`}">
</div>
vue中background-image图片路径问题的更多相关文章
- 周记4——vue中动态添加图片无效、build上线后background-image路径问题
又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...
- Vue如何在data中正常引入图片路径
在Vue项目中通过data设置图片路径,然后在template中引入后页面无法显示图片,浏览器控制台报错: 刚开始以为是路径出问题了,于是绝对路径.相对路 ...
- vue中动态引入图片为什么要是require, 你不知道的那些事
相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...
- vue 动态加载图片路径报错解决方法
最近遇到图片路径加载报错的问题 之前一直都是把图片放到assets的文件下的.总是报错,看到一些文章并且尝试成功了,特意记录下 首先先说明下vue-cli的assets和static的两个文件的区别, ...
- CSS中background:url(图片) 不能显示的问题
刚刚碰到一个奇怪的问题,这样一段CSS代码: .pho6 { background: url(img/pho6.jpg); } 这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题, ...
- css中background-image背景图片路径设置
web项目中经常会用到background-image:url(),很多小伙伴不知道该怎么写需要的图片路径. 在此之前先要知道几个重要的东东: / 项目根目录 这个不用多说,就是程序 ...
- 通过java获取html中所有的图片路径
/** * 获取网页上所有的图片路径 * @param htmlCode * @return */ public static List<String> getImageSrc(Strin ...
- 在 vue 中使用 vieiwer 图片预览插件
https://blog.csdn.net/WestLonly/article/details/79801800?utm_source=blogxgwz0 首先,感谢原作者 官网链接 github地址 ...
- Vue中import引入模块路径时的@符号
1.ES6 模块主要有两个功能:export 和 import export:用户对外输出本模块(一个文件可以理解为一个模块,比如 aaa.js bbb.js)变量的接口 . import:用于在一个 ...
- vue中import引入模块路径中@符号是什么意思
在编写vue文件中引入模块 import model from "@/common/model"; 这里路径前面的“@”符号表示什么意思? resolve: { // 自动补全的扩 ...
随机推荐
- redis GEO地理位置命令介绍
GEOADD keylongitude latitude member [longitude latitude member ...] Available since 3.2.0. Time comp ...
- Session和cookie有什么区别?
cookie是保存在客户端的信息,它只能保存String类型的,没有session安全,如果客户端禁用了cookie就不能够使用了 Cookie是客户端技术,程序把每个用户的数据以cookie的形式写 ...
- springboot 使用war包部署
ps://www.cnblogs.com/jiaoyiping/p/4251718.html
- Java 概述及安装使用
Java是什么 概述 java是一种面向对象编程语言,不过经过多年的发展,现在已经演变为了一套强大的技术体系.Java设计者们将Java划分为3种结构独立但却彼此依赖的技术体系分支,它们分别对应着不同 ...
- Jquery的parent和parents(找到某一特定的祖先元素)用法
<!-- parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合. parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素).可以通过一个可选的表达式进行筛选. ...
- MySql中存储过程的理解
到底什么是存储过程,又为什么需要使用存储过程? 存储过程简单来说,就是为以后的使用而保存的一条或多条MySQL语句的集合,可将其视为批文件,虽然它们的作用不仅限与批处理. 使用存储过程有3个主要的好处 ...
- java知识点积累(二)
4.条件运算符(三元运算符): String type = score<60?"不及格":"及格"; int i = (string=="hel ...
- Tomcat&Servlet
Tomcat&Servlet 一.web开发相关的概念 1. 软件架构 1.1 C/S架构 C:Client客户端, S:Server服务器 比如:QQ.微信.大型网游 优点: 显示效果炫 安 ...
- Exadata 12.2.1.1.0 Highlights
突然发现,在中国农历新年的这几年里,Exadata 12.2版本已经发布了. 本起去docs.oracle.com上看看它的新特性,结果发现文档还没有更新: 下面是找到的一些资料,让我们来一睹为快吧: ...
- excel无法复制
空字符(ascii 码 0,在程序里一般写作"\0"),在 vim 里就显示成 ^@. 如果在 vim 里遇到不确定的口字苻,可以在那个字符上按 ga(普通模式下宜接按,先 g 再 ...