在使用less在Vue.js中给元素添加背景图片时 ,我们可能会按照css的方法使用相对路径来处理我们的图片如下:
background-image: url('../img/shell.png');
但是发现路径报错然后我们就有了一下的写法,在less当中当中给元素设置背景图‘ ’是必须加的,而且变量必须是@{ 变量名 }这样的格式去书写,在@{ 变量名 }后面不允许出现@符号 否则会出现报错,因为他在编译过程中会认为你@{ 变量名 }后面的@符号是一个变量,并且检测到你的变量未规范书写URL里面的要求。所以使用less在给元素添加背景图设置URL时安装下面这个写法就可以完美实现无报错
background-image: url('../img/@{bg_url}2x.png');
具体代码如下style.less
.zmz-mdocs—iframe__box{
width: 320px;
height: 568px;
background-size: 100% 100%;
.bg-image('shell');
}
.bg-image(@bg_url){
background-image: url('../assets/img/@{bg_url}.png');
}
这样我们加载图片正确:
本文地址:https://www.zhuimengzhu.com/details/286.html
转载地址:暂无
转载说明:转载时请在文首注明来源zhuimengzhu.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。zhuimengzhu 保留追究相应责任的权利。