Uni–app中swiper组件图片（image）不显示的问题
今天在学习uni–app中的swiper时踩了一个巨大的坑
从接口获取了数据之后，将数据渲染在页面上，但是swiper里面的图片怎么都不显示
<template>
<view class="content">
<swiper class="swiper">
<swiper-item class="swiper-item" v-for="item in picList" :key="item.id">
<image :src="item.url" mode="aspectFill"></image>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
picList: []
}
},
onLoad() {
this.getSwiperPic()
},
methods: {
getSwiperPic() {
uni.request({
url: "https://api.thecatapi.com/v1/images/search?limit=2",
method: "GET",
success: ({data}) => {
this.picList = data
}
})
}
}
}
</script>
<style lang="scss">
.content {
// display: flex; //就是这一句代码惹的祸
.swiper {
.swiper-item {
image {
width: 100vw;
height: 350rpx;
}
}
}
}
</style>
加了弹性布局，页面没有报错，也能正常运行，但是就是不有图片
flex布局会影响swiper组件，所以不要把swiper组件放在flex布局的盒子中
原文地址:https://blog.csdn.net/H20220803/article/details/128062221
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_22562.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
