将以下代码改成图片展示 循环排列两列 展示

<template><view><image v-for="(image, index) in imageList" :key="index" :src="image"></image></view>
</template><script>
export default {data() {return {imageList: ['https://example.com/image1.jpg','https://example.com/image2.jpg','https://example.com/image3.jpg']};}
};
</script>

解决：

在下述代码中，我们给包含图片的容器设置了flex布局，并通过设置flex-wrap属性为wrap来实现换行。然后，给每个图片项设置了宽度为两列的一半，并设置了图片间距。这样就可以实现两列排列的图片展示效果。

<template><view class="image-container"><image v-for="(image, index) in imageList" :key="index" :src="image" class="image-item"></image></view>
</template><style>
.image-container {display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 20rpx;margin-left: 20px;margin-right: 20px;
}.image-item {width: 48%; /* 设置图片宽度为两列的一半 */margin-bottom: 10px; /* 设置图片间距 */
}
</style><script>
export default {data() {return {imageList: ['/static/test-image.jpg','/static/test-image.jpg','/static/test-image.jpg','/static/test-image.jpg','/static/test-image.jpg','/static/test-image.jpg','/static/test-image.jpg','/static/test-image.jpg','/static/test-image.jpg','/static/test-image.jpg','/static/test-image.jpg','/static/test-image.jpg','/static/test-image.jpg','/static/test-image.jpg','/static/test-image.jpg',]};}
};
</script>