解决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代码片段收集
Jul 12 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 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安装攻略:常见问题解答(一)
2006/10/09 PHP
让PHP支持页面回退的两种方法
2008/01/10 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
python查找目录下指定扩展名的文件实例
2015/04/01 Python
python中split方法用法分析
2015/04/17 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
财务总监管理岗位职责
2014/03/08 职场文书
《菜园里》教学反思
2014/04/17 职场文书
化妆品活动策划方案
2014/05/23 职场文书
扬州个园导游词
2015/02/06 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS