el-carousel加载缓慢

vue3.0+vite+ts使用el-carousel 实现轮播图场景，自动切换

首次加载缓慢，鼠标点击向左或者向右箭头才会显示图片，否则只显示下边的指示器。代码如下：

<div >
  <el-carousel :interval="5000" arrow="hover"  :autoplay="true" indicator-position="outside">
    <el-carousel-item v-for="(item,index) in getData.imageListUrl" :key="index" style="height: 100%">
      <el-image :src="item.imageUrl"></el-image>

    </el-carousel-item>
  </el-carousel>
</div>

原因分析：

一开始他以为是后台接口问题，在控制台打印，发现不是后台接口问题，于是考虑到是不是el-image标签的问题，后来自己写了一个div结果没有延迟，马上显示图片

 <div v-for="(item,index) in getData.imageListUrl" :key="index">
    <el-image :src="item.imageUrl" v-if="index==1"></el-image>
  </div>

不是el-image的问题，那就是el-carousel的问题，我用的是element-plus,查看官方文档没有找到解决方案，于是百度了一下，说是el-carousel的自动添加了一个空的数据

---

解决方案：

在el-carousel上添加一个if语句，判断数据是否为空，如下：

<el-carousel :interval="5000" arrow="hover"  :autoplay="true" indicator-position="outside" v-if="getData.imageListUrl[0]!=null">
    <el-carousel-item v-for="(item,index) in getData.imageListUrl" :key="index" style="height: 100%">
      <el-image :src="item.imageUrl"></el-image>

    </el-carousel-item>
  </el-carousel>

刷新页面，没有问题了，完美解决。element-plus还是有坑啊，革命尚未成功！