uniapp实现图片预览，懒加载

实现的功能

1. 懒加载 lazy-load --对小程序其起效果
2. 图片预览

效果如图：

代码

<template><view class="image-list"><view v-for="(item, index) in imageList" :key="item._id" class="image-card"><image lazy-load :src="item.url" mode="widthFix" @click="previewImage(index)"></image><view class="text">{{ item.author }}</view></view></view>
</template><script setup>let imageList = ref([])uni.showLoading({title: '加载中'})uni.request({url:"https://tea.qingnian8.com/tools/petShow?size=10",header:{'access-key':"zhaohui6968613"},success(res) {console.log(res)imageList.value = res.data.data},complete() {uni.hideLoading();}})function previewImage(index) {const urls = imageList.value.map(item => item.url)uni.previewImage({current: index,urls})}
</script><style lang="scss" scoped>.image-list {.image-card {margin: 50rpx;box-shadow: 0 4rpx 4rpx 10rpx #eee;.text {padding: 10rpx;text-align: right;}}} 
</style>

遇到的问题

1.https在小程序会报错

解决： 后期打包时候需要配置上地址