【Vue】v-for循环图片绝对路径，图片无法显示

1、src 和 :src

<swiper-slide v-for="item of swiperList" :key='item.id'>
    <img :src="item.srcUrl" />
    <!--<img v-bind:src="item.srcUrl" />-->
</swiper-slide>

图片循环的时候，要用 :src，是 v-bind:src 的简写形式。

2、第一种情况：如果图片放在 src 文件夹下

require加载,require加载图片时可以使用相对地址

swiperList: [
        {
          srcUrl: require('@/assets/images/img1.jpg')
        },
        {
          srcUrl: require('@/assets/images/img2.jpg')
        },
        {
          srcUrl: require('@/assets/images/img3.jpg')
        }
]

第二种情况：如果图片放在 static 文件夹下，循环时可以用绝对地址 ，因为 static 目录下的文件打包时不会被webpack处理。