Uni-app中swiper组件图片（image）不显示的问题

Uni–app中swiper组件图片（image）不显示的问题
今天在学习uni–app中的swiper时踩了一个巨大的坑
从接口获取了数据之后，将数据渲染在页面上，但是swiper里面的图片怎么都不显示

<template>
	<view class="content">
		<swiper class="swiper"&gt;
			<swiper-item class="swiper-item" v-for="item in picList" :key="item.id"&gt;
				<image :src="item.url" mode="aspectFill"&gt;</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布局的盒子中

代码007普通

打赏 收藏 海报 链接