vue解决动态加载图片静态资源路径的问题

开发时遇到的问题，在使用v-for循环的时候，明明地址没有问题，但是依旧显示不出来图片

// html
<el-carousel-item v-for="(item, index) in imgSrc" :key="index">
    <img :src="item" />
</el-carousel-item>

// js
// @表示处于src文件夹下
 imgSrc:['@/assets/swiper/slide3.png',
        '@/assets/swiper/slide3.png',
        '@/assets/swiper/slide3.png',],

这样写的效果如下：

 图片显示不出来！

打开控制台查看静态资源，发现图片根本没有显示，预览是空的！

 网上查了不少资料，最后才发现，原来是我引入的问题，先上代码解决问题，再详细说明原因吧

// html
<el-carousel-item v-for="(item, index) in imgSrc" :key="index">
    <img :src="item" />
</el-carousel-item>

// js
// 静态资源图片需要用require引入
imgSrc: [require('@/assets/swiper/slide3.png'),
        require('@/assets/swiper/slide3.png'),
        require('@/assets/swiper/slide3.png'),],

 这样图片就出来了！

原因：

不用require引入，浏览器会直接显示 '@/assets/swiper/slide3.png' ，不经过编译的步骤，直接将获取到的数据当作字符串显示。