按照以往在css文件中写background:url('图片路径'),完成后加载竟然显示出错,起初以为路径不对,检查了几遍,仍然没有问题。最后百度找答案,发现不少同行都遇到过这种问题,遂记录下自己所采用的解决方式:

data () {
return {
img: require('你的图片路径')
}
}

div的写法:

<div :style="{backgroundImage: 'url(' + img + ')'}">
</div>

更简便的写法:

<div :style="{backgroundImage:`url(${img})`}">
</div>

vue中background-image图片路径问题的更多相关文章

  1. 周记4——vue中动态添加图片无效、build上线后background-image路径问题

    又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...

  2. Vue如何在data中正常引入图片路径

    在Vue项目中通过data设置图片路径,然后在template中引入后页面无法显示图片,浏览器控制台报错:                        刚开始以为是路径出问题了,于是绝对路径.相对路 ...

  3. vue中动态引入图片为什么要是require, 你不知道的那些事

    相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...

  4. vue 动态加载图片路径报错解决方法

    最近遇到图片路径加载报错的问题 之前一直都是把图片放到assets的文件下的.总是报错,看到一些文章并且尝试成功了,特意记录下 首先先说明下vue-cli的assets和static的两个文件的区别, ...

  5. CSS中background:url(图片) 不能显示的问题

    刚刚碰到一个奇怪的问题,这样一段CSS代码:   .pho6 { background: url(img/pho6.jpg);  } 这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题, ...

  6. css中background-image背景图片路径设置

    web项目中经常会用到background-image:url(),很多小伙伴不知道该怎么写需要的图片路径. 在此之前先要知道几个重要的东东: /  项目根目录         这个不用多说,就是程序 ...

  7. 通过java获取html中所有的图片路径

    /** * 获取网页上所有的图片路径 * @param htmlCode * @return */ public static List<String> getImageSrc(Strin ...

  8. 在 vue 中使用 vieiwer 图片预览插件

    https://blog.csdn.net/WestLonly/article/details/79801800?utm_source=blogxgwz0 首先,感谢原作者 官网链接 github地址 ...

  9. Vue中import引入模块路径时的@符号

    1.ES6 模块主要有两个功能:export 和 import export:用户对外输出本模块(一个文件可以理解为一个模块,比如 aaa.js bbb.js)变量的接口 . import:用于在一个 ...

  10. vue中import引入模块路径中@符号是什么意思

    在编写vue文件中引入模块 import model from "@/common/model"; 这里路径前面的“@”符号表示什么意思? resolve: { // 自动补全的扩 ...

随机推荐

  1. 17、SAM文件格式说明(转载迷宫中的将军)

    1. SAM格式说明 SAM代表Sequence Alignment/Map格式,是一种制表符分隔的文本格式,包含一个可选的头部分(header section,有人称之为“注释部分”),和一个比对部 ...

  2. Luogu 4345 [SHOI2015]超能粒子炮·改

    BZOJ4591 并不会写的组合数学. 我们设$f(n, k) = \sum_{i= 0}^{k}\binom{n}{i}$,那么每一个询问要求的就是$f(n, k)$. 发现$f(i, j)$其实可 ...

  3. Linux 静态库(.a)转换为动态库(.so)

    Linux 静态库转换为动态库 参考 http://blog.csdn.net/moxuansheng/article/details/5812410 首先将.a文件转为.so文件是可以实现的 原因是 ...

  4. 安装json format插件

    更多工具->扩展->搜索:son format插件 这样得到的json数据以一种美观的样式显示.

  5. Dapper.Common基于Dapper的开源LINQ超轻量扩展

    Dapper.Common Dapper.Common是基于Dapper的LINQ实现,支持.net core,遵循Linq语法规则.链式调用.配置简单.上手快,支持Mysql,Sqlserver(目 ...

  6. Linux之shell备份数据库

    功能概述: 使用shell脚本对服务器的数据库(全部或指定数据库)进行备份.对15天(固定天数)之前的数据库备份进行删除 命令实现: 待定

  7. CF 984C Finite or not? (数论)

    CF 984C Finite or not? (数论) 给定T(T<=1e5)组数据,每组数据给出十进制表示下的整数p,q,b,求问p/q在b进制意义下是否是有限小数. 首先我们先把p/q约分一 ...

  8. [USACO07MAR]黄金阵容均衡Gold Balanced L… map

    题目描述 Farmer John's N cows (1 ≤ N ≤ 100,000) share many similarities. In fact, FJ has been able to na ...

  9. HDU2048 神、上帝以及老天爷

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2048 看书发现了这道题,刚开始没理解题意,以为是中奖的概率,---> 1/n 后来知道了是典型的错排 ...

  10. CF616D Longest k-Good Segment

    题目描述 给定一个包含\(n\)个整数的序列\(a\),\(0\le a_i \le 10^6\),询问不重复数字个数\(\le k\)的最长区间的左右端点.如果有多解输出任意一组. 输入输出格式 输 ...