img使用 :src 动态绑定图片地址，图片不成功

使用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>