vue使用v-for动态绑定div背景图片

以下为element ui的走马灯组件中插入div

<template>
  <div class="block">
    <span class="demonstration" >Hover </span>
    <el-carousel height="460px">
      <el-carousel-item v-for="(item,i) in imgUrl" :key="i" >
         <div  :style="{width:'100%',height:'460px',backgroundImage: 'url(' + item + ')', backgroundSize:'contain' ,backgroundSize:'100%'}"></div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

imgUrl：添加图片路径

动态循环更改背景方法：

:style="{backgroundImage: 'url(' + item + ')', backgroundSize:'contain' ,backgroundSize:'100%'}"

一定要为div设置宽高， 不然div没有内容 ，实际上已经添加了背景但是不会显示。

效果：

2021.7.26
设置位置

        <div class="bikeDetails" :style="{backgroundImage: 'url(' + vectorIcon + ')' ,backgroundSize:'20%',backgroundRepeat: 'no-repeat',
        backgroundPosition:'top right'}">