使用vue cli 创建的vue2项目，项目中想实现轮播效果。

出现的问题：

使用 :src 动态绑定图片地址，图片没有出现

          <el-carousel :interval="3000" arrow="always"><el-carousel-item v-for="(item,index) in swipperImg" :key="index"><img :src="item.imgUrl" alt=""></el-carousel-item></el-carousel>

 data() {return {swipperImg:[{imgUrl:'../../assets/animals1.jpeg'},{imgUrl:'../../assets/animals2.jpg'},{imgUrl:'../../assets/animals4.jpg'},{imgUrl:'../../assets/animals5.jpg'},{imgUrl:'../../assets/animals7.jpeg'},]}},

此时图片没有出现，控制台报错 http://localhost:8080/assets/animals1.jpeg 404 (Not Found)

当图片地址写死时，图片出现：

          <el-carousel :interval="5000" arrow="always"><el-carousel-item ><img src="../../assets/animals1.jpeg" alt=""></el-carousel-item></el-carousel>

此时控制台中出现的图片地址是http://localhost:8080/img/animals1.dc0540de.jpeg

解决办法：

使用require引入图片，完整代码如下，此时图片引入成功

<template><div class=""><div class="pt100 carousel"><el-carousel :interval="5000" arrow="always"><el-carousel-item v-for="(item,index) in swipperImg" :key="index"><img :src="item.imgUrl" alt=""></el-carousel-item></el-carousel></div></div>
</template><script>
export default {name:"",data() {return {swipperImg:[{imgUrl: require('../../assets/animals1.jpeg')},{imgUrl: require('../../assets/animals2.jpg')},{imgUrl: require('../../assets/animals4.jpg')},{imgUrl: require('../../assets/animals5.jpg')},{imgUrl: require('../../assets/animals7.jpeg')},]}},
}
</script>