解决Vue2.0中使用less给元素添加背景图片出现的问题
更新时间：2018年09月03日 08:42:14 作者：豆i浆
今天小编就为大家分享一篇解决Vue2.0中使用less给元素添加背景图片出现的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在使用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会在命令行给你出现报错，比如这样：
而浏览器也会给你温馨提示：
在less当中当中给元素设置背景图‘ '是必须加的，而且变量必须是@{ 变量名 }这样的格式去书写，在@{ 变量名 }后面不允许出现@符号 否则会出现报错，因为他在编译过程中会认为你@{ 变量名 }后面的@符号是一个变量，并且检测到你的变量未规范书写URL里面的要求。所以使用less在给元素添加背景图设置URL时安装下面这个写法就可以完美实现无报错
background-image: url('../img/@{bg_url}2x.png');
在使用less设置背景图使用变量时，尽量避免图片名称带有@符号，以减少不必要的麻烦！
以上这篇解决Vue2.0中使用less给元素添加背景图片出现的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了vue/react单页应用后退不刷新方案，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
解决elementUI中el-tree树形结构中节点过滤的问题
这篇文章主要介绍了解决elementUI中el-tree树形结构中节点过滤的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue路由传参的基本实现方式,结合实例形式总结分析了vue.js路由传参的三种实现方式,包括params显示传参、不显示参数以及query显示参数传参,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了vue储存storage时含有布尔值的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-06-06
vue el-date-picker动态限制时间范围案例详解
这篇文章主要介绍了vue el-date-picker动态限制时间范围案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
vue2.x中h函数(createElement)与vue3中的h函数详解
h函数本质就是createElement(),h函数其实是createVNode的语法糖,返回的就是一个Js普通对象,下面这篇文章主要给大家介绍了关于vue2.x中h函数(createElement)与vue3中h函数的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue如何截取字符串，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了vue实现密码显示隐藏功能的思路详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-03
这篇文章主要介绍了vue3新增Teleport的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
vue-router3.0版本中 router.push 不能刷新页面的问题
这篇文章主要介绍了vue-router3.0版本中 router.push 不能刷新页面的问题,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
最新评论