Vue 中动态绑定背景图片（三种情况）

1.服务端返回图片链接<divclass="bg-img":style="{ backgroundImage: `url(${imgUrl})` }" /><div2.引用本地的图片<divclass="bg-img":style="{ backgroundImage: `url(${imgUrl})` }" /><divimgUrl: require('../

MrQiuGH

27714人浏览 · 2022-01-13 16:06:45

MrQiuGH · 2022-01-13 16:06:45 发布

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;
}