概述

在使用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');
}

这样我们加载图片正确：