您的位置:首页 > 游戏 > 游戏 > 招聘网站哪个好_网站运营模式_网站运营及推广方案_淘宝推广公司

招聘网站哪个好_网站运营模式_网站运营及推广方案_淘宝推广公司

2025/7/5 23:38:38 来源:https://blog.csdn.net/weixin_52173254/article/details/146888023  浏览:    关键词:招聘网站哪个好_网站运营模式_网站运营及推广方案_淘宝推广公司
招聘网站哪个好_网站运营模式_网站运营及推广方案_淘宝推广公司

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

在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com