Vue 中动态绑定背景图片(三种情况)

1.服务端返回图片链接
 
<div
  class="bg-img"
  :style="{ backgroundImage: `url(${imgUrl})` }" />

 2.引用本地的图片

<div
  class="bg-img"
  :style="{ backgroundImage: `url(${imgUrl})` }" />

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

    原文链接:https://blog.csdn.net/xh17864388739/article/details/122475500

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值