按照以往在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. 业务逻辑:完成客户下单后前台系统的数据处理并调用后台系统服务处理业务 webservice接口调用 有用

    思路: 页面提交表单后,在Action类中将页面提交的参数进行组装,随后通过使用Webservice技术来远程调用后台系统的业务接口服务来进行订单的保存操作 操作步骤: 在前台系统的Action类中通 ...

  2. 9、IPA通路分析相关网页教程

    IPA FAQ: http://ingenuity.force.com/ipa/IPATutorials# ####有各种相关教程和帮助文件. IPA 分析结果展示: http://www.lucid ...

  3. 使用python内置模块os和openpyxl搜索指定文件夹下Excel中的内容

    在指定路径下,搜索Excel文件中包含的指定内容,首先需要遍历指定路径,得到该路径下所有Excel文件的绝对/相对路径:然后读取Excel中内容,将文件中的每个单元格的值与要搜索的内容进行判断(正则比 ...

  4. java基础题--自我准备

    1.String,StringBuffer,StringBuilder区别---final类型的区别,何时用三者? 2.Vector与ArrayList区别--同步.线程安全.性能.容量扩增大小 3. ...

  5. Cactus项目(又叫MVCAdmin),开源(2016-11-26更新)

    Cactus基于之前简单后台管理的改良版本,完善了权限管理,为后续的扩展和管理做了铺垫. 完全开放代码,可供学习交流 目前采用MVC4+Autofac+Dapper制作而成,集成一个简单的Blog和权 ...

  6. linux网络基础-网卡bonding技术

    1.bondingbonding(绑定)是一种linux系统下的网卡绑定技术,可以把服务器上n个物理网卡在系统内部抽象(绑定)成一个逻辑上的网卡,实现本地网卡的冗余,带宽扩容和负载均衡.在应用部署中是 ...

  7. libguestfs知识点

    libguestfs 是一组 Linux 下的 C 语言的 API ,用来访问虚拟机的磁盘映像文件.其项目主页是http://libguestfs.org/ , 该工具包内包含的工具有virt-cat ...

  8. 2017-10-2 清北刷题冲刺班p.m

    最大值 (max) Time Limit:1000ms   Memory Limit:128MB 题目描述 LYK有一本书,上面有很多有趣的OI问题.今天LYK看到了这么一道题目: 这里有一个长度为n ...

  9. STP-16-根防护,BPDU防护和BPDU过滤

    网络设计者很可能并不打算让终端用户在用于连接终端用户设备的Access端口上连接交换机.然而,这种事情有时却会发生——例如,有人可能需要大厅的会议室里有更多的端口,于是他觉得他可以把一个小的便宜的交换 ...

  10. Unraveling the JPEG file

    (文章还剩实践部分没写,答辩过后补上...) JPEG文件在当下数字化生活中是无处不在的,但是在熟悉的JPEG面纱背后,隐藏着一些算法,它们去除了人类眼中无法察觉到的细节.这产生了最高的视觉质量与最小 ...