按照以往在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. ASE分析

    1.Prepare necessary input files(可以参考上次的博客http://www.cnblogs.com/renping/p/7391028.html) 1)对fq1和fq2合并 ...

  2. 7、linux常见系统环境变量

    使用env命令显示所有环境变量 env  (常见的有HOSTNAME,SHELL,HISTSIZE,PERL5LIB,USER,PATH,PWD,LANG,HOME, LD_LIBRARY_PATH ...

  3. 19E Fairy

    Once upon a time there lived a good fairy A. One day a fine young man B came to her and asked to pre ...

  4. URAL 2018 The Debut Album (DP)

    题意:给出n长度的数列,其实1的连续个数不超过a,2的连续个数不超过b. 析:dp[i][j][k] 表示前 i 个数,以 j 结尾,并且连续了k个长度,要用滚动数组,要不然MLE. 代码如下: #p ...

  5. 项目:IT资源共享资源(登录前端)<1>

    公众号技术标签 小程序 PHP 源码 项目 IT资源共享项目 这是前年自己收集了一些网络开发资源,上传到百度网盘,提供积分兑换.上线后用户在两个月内达到3427人,其中用java,PHP,前端,Pyt ...

  6. Zjoi2011 看电影

    最近在学习一些概率的东西.. 一个随机试验称为 Laplace 试验,当且仅当它满足如下两个条件: (ⅰ) 试验结果 (样本点) 的个数是有限的.(Ω 是有限集) (ⅱ) 任意两个基本事件的概率均相等 ...

  7. Mysql-2-数据库基础

    (1)mysql是一个小型关系型数据库管理系统. (2)mysql是一个快速.多线程.多用户.健壮的SQL数据库服务器.与其他数据库管理系统比,mysql有以下的优势: mysql是一个关系数据库管理 ...

  8. springMVC容器加载源码分析

    springmvc是一个基于servlet容器的轻量灵活的mvc框架,在它整个请求过程中,为了能够灵活定制各种需求,所以提供了一系列的组件完成整个请求的映射,响应等等处理.这里我们来分析下spring ...

  9. 利用docker部署redis集群

    目录 一.首先配置redis.conf文件,... 1 1.获取配置文件... 1 2.修改各配置文件的参数... 2 二.下载redis镜像.启动容器... 2 1.创建网络... 2 2.拉取镜像 ...

  10. 分层图最短路【bzoj2763】: [JLOI2011]飞行路线

    bzoj2763: [JLOI2011]飞行路线 Description Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在n个城市设有业务,设这些城市分别标记为0 ...