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: { // 自动补全的扩 ...
随机推荐
- springboot thymeleaf org.xml.sax.SAXParseException错误
SpringBoot越来越受欢迎,而官方推荐的模板是thymeleaf ,但是其语法太过严格,使用过程中一不留心就会出现org.xml.sax.SAXParseException错误 其中主要是下面这 ...
- 用 R 画中国分省市地图
用 R 画中国分省市地图 (2010-11-18 16:25:34) 转载▼ 标签: 中国地图 营销 杂谈 分类: 数据分析 用R 也可以做出漂亮的依参数变化的中国地图. 主要参考(http://co ...
- Java基础——深入剖析Java中的装箱和拆箱
(转自:http://www.cnblogs.com/dolphin0520/p/3780005.html) 自动装箱和拆箱问题是Java中一个老生常谈的问题了,今天我们就来一些看一下装箱和拆箱中的若 ...
- 1.3 DVWA亲测sql注入漏洞
LOW等级 我们先输入1 我们加上一个单引号,页面报错 我们看一下源代码: <?php if( isset( $_REQUEST[ 'Submit' ] ) ) { // Get input ...
- 【转】JAVA输出内容打印到TXT以及不同系统中如何换行
JAVA输出内容打印到TXT以及不同系统中如何换行 http://xiyang.09.blog.163.com/blog/static/59827615201172552755293/ 2011-08 ...
- 《Linux内核设计与实现》读书笔记(一)-内核简介
本篇简单介绍内核相关的基本概念. 主要内容: 单内核和微内核 内核版本号 1. 单内核和微内核 原理 优势 劣势 单内核 整个内核都在一个大内核地址空间上运行. 1. 简单.2. 高效:所有内核都 ...
- ASP.NET十分有用的页面间传值方法(转)
一.目前在ASP.NET中页面传值共有这么几种方式: 1.表单提交, <form action= "target.aspx" method = "post&qu ...
- PAT12-012【建最小堆】
卧槽..没看清 值 还有负的.. PS: 注意他说是一个一个插入的,也就是插在完全二叉树的最末位置,然后向上更新. #include<bits/stdc++.h> using namesp ...
- Unity3D -- shader光照常用函数和变量
上一篇记录了shader常用函数和变量,这篇记录一些光照计算时常用函数和变量 1.内置的光照变量 _LightColor0 float4 //该Pass处理的逐像素光源的颜色 _WorldSpaceL ...
- 51nod1347(简单逻辑)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1347 题意:中文题诶- 思路:稍推理一下就可以发现字符串a是 ...