解决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 相关文章推荐
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
微信小程序如何连接Java后台
Aug 08 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
python调用摄像头显示图像的实例
2018/08/03 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
Python的条件锁与事件共享详解
2019/09/12 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
开会迟到检讨书
2014/01/08 职场文书
关于期中考试的反思
2014/02/02 职场文书
乔迁之喜主持词
2014/03/27 职场文书
计算机专业应届生求职信
2014/04/06 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
写得不错的求职信范文
2014/07/11 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
2014年关工委工作总结
2014/11/17 职场文书
求职信范文怎么写
2015/03/19 职场文书
管理失职检讨书
2015/05/05 职场文书
会议室管理制度范本
2015/08/06 职场文书
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL