网站流量统计分析报告义乌seo推广

走马灯(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