v-for给img的src动态赋值问题

时间：2021-09-05 23:18:10

做一个轮播图，给img赋值src

<el-carousel-item v-for="(item, index) in carouselImgs" :key="index">
        <img  :src="item.url" alt="一张宣传图片" height="400">
          <!-- <img src="../../assets/images/home/banner-04.6b52be3.png" alt=""> --> // 注释
      </el-carousel-item>
return {
        carouselImgs: [
          {url: '../../assets/images/home/banner-01.fd6a45e.png'},
          {url: '../../assets/images/home/banner-02.0901fd3.png'},
          {url: '../../assets/images/home/banner-03.7f1d6b0.png'},
          {url: '../../assets/images/home/banner-04.6b52be3.png'}
        ]
     }

发现全部都加载失败了，原因是webpack把图片作为模块处理，下面是解决方法

return {
        carouselImgs: [
          {url: require('../../assets/images/home/banner-01.fd6a45e.png')},
          {url: require('../../assets/images/home/banner-02.0901fd3.png')},
          {url: require('../../assets/images/home/banner-03.7f1d6b0.png')},
          {url: require('../../assets/images/home/banner-04.6b52be3.png')}
        ]
     }

对于轮播图，也可以作为背景图去做

<div :style="{backgroundImage: 'url('+ item.url +')'}"></div>

 

标签：

相关文章