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

做一个轮播图，给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>

巴特西

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

最新文章

热门文章