解决Vue2.0中使用less给元素添加背景图片出现的问题


Posted in Javascript onSeptember 03, 2018

在使用less在Vue.js中给元素添加背景图片时 或者你会出现这样的写法

background-image: url('../img/' + @{bg_url} + '2x.png');

或者这样

background-image: url('../img/' + @bg_url + '2x.png');

这样

background-image: url(../img/@{bg_url}2x.png);

还有这样

background-image: url(../img/@bg_url2x.png);

这样的

background-image: url(../img/@{bg_url}@2x.png);

如果都有其中一种,恭喜你都错了~~~

VUE会在命令行给你出现报错,比如这样:

解决Vue2.0中使用less给元素添加背景图片出现的问题

而浏览器也会给你温馨提示:

解决Vue2.0中使用less给元素添加背景图片出现的问题

在less当中当中给元素设置背景图‘ '是必须加的,而且变量必须是@{ 变量名 }这样的格式去书写,在@{ 变量名 }后面不允许出现@符号 否则会出现报错,因为他在编译过程中会认为你@{ 变量名 }后面的@符号是一个变量,并且检测到你的变量未规范书写URL里面的要求。所以使用less在给元素添加背景图设置URL时安装下面这个写法就可以完美实现无报错

background-image: url('../img/@{bg_url}2x.png');

在使用less设置背景图使用变量时,尽量避免图片名称带有@符号,以减少不必要的麻烦!

以上这篇解决Vue2.0中使用less给元素添加背景图片出现的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 #Javascript
详解jQuery中的easyui
Sep 02 #jQuery
vue-cli脚手架的安装教程图解
Sep 02 #Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 #Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 #Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 #Javascript
修改vue+webpack run build的路径方法
Sep 01 #Javascript
You might like
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
ajax 缓存 问题 requestheader
2010/08/01 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
python实现微信远程控制电脑
2018/02/22 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
经典优秀个人求职自荐信格式
2013/09/25 职场文书
大专生自我评价
2014/01/28 职场文书
供电工程专业求职信
2014/08/09 职场文书
单位授权委托书范本
2014/09/26 职场文书
求职自荐信怎么写
2015/03/04 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL