element-plus走马灯(el-carousel)不显示问题

走马灯(el-carousel)不显示和里面图片不显示问题

在完成后端图片以json形式渲染到前端走马灯时遇到的问题。写下来备忘。
这个问题我排查了一下午，调代码样式、弄图片链接、数据传输排查等。。
到最后才解决问题（都是细节）。发现以下几种情况：

情况一：

如果你写了一个简单的el-carousel标签里面放了图片，又恰好用div套住了标签。如果div没有设置宽度，那么el-carousel和里面的内容不能正常显示。
解决方法：给div一个宽。

情况二：

如果你导入的图片是本地图片：（使用图片时需要require引入，直接写图片路径不生效）

 <el-carousel height="250px">
     <el-carousel-item v-for="item in carouselList" :key="item">
         <img :src="item.path" />
     </el-carousel-item>
 </el-carousel>

const carouselList = reactive([
      { path: require('../../static/img/1.jpg') },
      { path: require('../../static/img/2.jpg') },
      { path: require('../../static/img/3.jpg') }
  ])

情况三：

这也是最终困扰我的情况，依赖没问题，代码没问题，数据格式也没问题，但是element-plu走马灯就是不显示！！
如果你的css样式中有以下内容，删除即可。因为走马灯不是flex布局。细节决定成败。

display: flex