解决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 下拉列表 二级联动插件分享
Mar 29 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 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/01/07 PHP
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
JS变量及其作用域
2017/03/29 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
Python函数学习笔记
2008/10/07 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
副总经理岗位职责
2014/03/16 职场文书
房地产广告词大全
2014/03/19 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
幼儿学前班评语
2014/12/29 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
甲午风云观后感
2015/06/02 职场文书
感恩教师节主题班会
2015/08/12 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
HTML+JS实现在线朗读器
2022/02/15 Javascript
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL