解决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 相关文章推荐
json 实例详细说明教程
Oct 31 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
jQuery的position()方法详解
Jul 19 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
Bootstrap 布局组件(全)
Jul 18 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
js精确的加减乘除实例
Nov 14 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
js布局实现单选按钮控件
Jan 17 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判断浏览器的类型和语言的函数代码
2013/02/28 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
Python语法快速入门指南
2015/10/12 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
python 用struct模块解决黏包问题
2020/11/07 Python
航海技术专业毕业生求职信
2014/04/06 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
成绩报告单家长评语
2014/12/30 职场文书
2016寒假假期总结
2015/10/10 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL