按照以往在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. 错误:Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 and 6 Web

    在eclipse的workspace里面找到该项目. 依次进入:.settings->org.eclipse.wst.common.project.facet.core.xml. 打开文件后,将 ...

  2. 介绍一款“对话框”组件之 “artDialog”在项目中的使用

    在实际开发项目中经常会用到对话框组件,提示一些信息.其实有很多,例如:在项目中常用到的“Jquery-UI.Jquery-EasyUI”的.Dialog,他们也很强大,Api文档也很多.今天就介绍一款 ...

  3. HN669打包工具--打包工具使用文档

    打包工具主要包含下载更新资源文件以及打包两个部分 一.下载更新资源文件 1.终端进入工具根目录,即HN669SDK_iOS目录,并运行./api.sh脚本 2.输入游戏id (note:此游戏id为我 ...

  4. 洛谷P1349 广义斐波那契数列

    传送门 话说谁能告诉我矩阵怎么用latex表示…… 差不多就这样 //minamoto #include<iostream> #include<cstdio> #include ...

  5. /etc/hosts文件修改后如何生效

    修改/etc/hosts之后正常情况应该是保存之后立即生效的,但是有时不是.使用uname -a 可以查看hostname是多少,就可以知道是否修改生效了.如果没有这时的策略有:1) 重启机器2) 重 ...

  6. docker默认存储空间用完情况下,做迁移数据

    由于docker默认存放数据路径为/var/lib/docker,但运行了一段时间后,发现/var/lib/docker下的目录文件过大,导致此分区空间不够用.通过以下方法,解决该问题. 如何避免: ...

  7. gitlab web端使用

    https://jenkins.io/zh/doc/pipeline/tour/getting-started/ http://www.cnblogs.com/cheng95/p/6542036.ht ...

  8. Anywhere 随启随用的静态文件服务器

    三江建材官网项目 写nodeJs系列的文章都是因为这一个项目 第一天,搭建项目环境 记录心情: 首先,在写这个项目的时候,我很无助,只是拿到了设计稿,还有一个指导人,平常会很忙,只有在休闲的时候才能动 ...

  9. Docker从入门到实战(四)

    Docker基础 一:Docker基本操作 一般情况安装Docker之后系统会自动创建一个Docker的用户组,如果没有创建可以手动创建groupadd docker把当前非root用户加入group ...

  10. Caused by: MetaException(message:Hive Schema version 2.1.0 does not match metastore's schema version 1.2.0 Metastore is not upgraded or corrupt)

    解决方案汇总: ()删除HDFS上的hive数据与hive数据库 hadoop fs -rm -r -f /tmp/hive hadoop fs -rm -r -f /user/hive ()删除My ...