Vue2.0中使用less给元素添加背景图片出现错误路径不正确
文章 1989 0 0 0
发布时间:2020年01月06日

概述

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

这样我们加载图片正确:

Vue2.0中使用less给元素添加背景图片出现错误路径不正确

评论专区