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>