Vue 中动态绑定背景图片（三种情况）
1.服务端返回图片链接
<div
class="bg-img"
:style="{ backgroundImage: `url(${imgUrl})` }" />
<div
2.引用本地的图片
<div
class="bg-img"
:style="{ backgroundImage: `url(${imgUrl})` }" />
<div
imgUrl: require(../assets/bg-img.png),
一定要以require的方式引入，否则项目编译完渲染的时候路径有问题。
3.v-for 循环出来的 div 设置不同的背景
-
动态绑定类名
<div
v-for="(item, index) in list"
:key="index"
class="list-item">
<div
class="item-title"
:class="bgImg[index]" />
</div>
-
定义类名映射数组
data() {
return {
bgImg: [bg-img0, bg-img1, bg-img2],
};
},
-
在style中设置背景图
.bg-img0 {
background: url(../assets/images/title0.png) center no-repeat;
}
.bg-img1 {
background: url(../assets/images/title1.png) center no-repeat;
}
.bg-img2 {
background: url(../assets/images/title2.png) center no-repeat;
}
