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: { // 自动补全的扩 ...
随机推荐
- Servlet编程实例 续1
-----------------siwuxie095 在 LoginServlet 中,右键->Open Type Hierar ...
- redis GEO地理位置命令介绍
GEOADD keylongitude latitude member [longitude latitude member ...] Available since 3.2.0. Time comp ...
- SpringBoot04 SpringBoot 和 MyBatis 整合
1 所需的jar包 mysql驱动包:mysql-connector-java 数据库链接池:druid mybatis对应jar包:mybatis-spring-boot-starter 分页查询对 ...
- if if 和 if elif 的区别
再一次编程中意外使用了if if 也实现了 if elif的功能,所以搜索了下其中的区别: 1.if if 和 if elif 是有区别的,只是在某些情况下才会一样的效果: 2.随意使用会导致意外的错 ...
- 9. CTF综合靶机渗透(二)
靶机说明 Welcome to the world of Acid. Fairy tails uses secret keys to open the magical doors. 欢迎来到酸的世界. ...
- poj 1410 Intersection (判断线段与矩形相交 判线段相交)
题目链接 Intersection Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 12040 Accepted: 312 ...
- SQL Server列属性修改
0.创建表 create table Users(Id int,Name nvarchar(32) not null,Phone nvarchar(16),Email nvarchar(128)) 1 ...
- redis命令集
查看使用运行服务:ping 关闭服务的连接:quit 切换数据库:select index 连接: redis-cli -h -a myPassword 查看密码: config get requir ...
- [Xcode 实际操作]三、视图控制器-(8)在Storyboard中设置初始化视图控制器
目录:[Swift]Xcode实际操作 本文将演示如何设置故事板的初始视图控制器. 打开自动生成的默认故事板[Main.storyboard] 在打开的故事板中,系统已经生成了一个空白的视图控制器. ...
- linux下apache无法启动之(httpd not running, trying to st)
这突然接手的服务器,本来是没什么事的,可是因为机房的问题,需要将服务器迁回来,结果可想而知,关机重启了,其中有一台估计诚心给我过不去,待配置好ip并重启了服务后,发现apache无法正常启动了! 先还 ...