### 基本用法： 在uniapp中，我们可以使用`uni.previewImage()`API对图片进行预览，具体使用方法如下： ``` uni.previewImage({ urls: ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'], current: 0 }); ``` 其中，`urls`参数为一个字符串数组，表示需要预览的图片数组；`current`参数为一个数字，表示当前选中的图片在数组中的索引值，从0开始计数。 在调用`uni.previewImage()`方法后，uniapp会显示系统自带的图片预览界面，用户可以滑动查看多张图片，也可以缩放图片进行查看。 ### 在vue3中的简单示例： ``` <script setup lang="ts"> import { ref, reactive } from 'vue' const state = reactive({ imgList: ['https://img1.baidu.com/it/u=2749857666,4031842358&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=773', 'https://img2.baidu.com/it/u=2583282997,4052280191&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1081', 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F546d1162-c6cb-4001-9110-fe1e05ac4e65%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696840654&t=54e2db45921da0a2c48a7b88a16890a0', 'https://img1.baidu.com/it/u=4223515363,158474147&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500', 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fcb5924af-c6a9-44de-b4f5-ab11f0123223%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696840654&t=0f7fdaea9376f89222845bcc7f0cee10' ] }) const previewImg = (index = 0) => { uni.previewImage({ urls: state.imgList, current: index }); } </script> ``` ### 循环绑定图片的时候使用 tn2> 这里的item.imgJson是一个图片id集合的json字符串，所以需要转化成json对象。GetImgUrl是一个我们系统里边封装的根据图片id获取图片地址的方法 ``` <image class="imgitem" v-for="(img, index) in JSON.parse(item.imgJson)" :key="index" mode="aspectFill" :src="GetImgUrl(img)" @tap="previewImg(item.imgJson,index)"/> <view class="" style="flex: 1" /> ``` 图片预览方法： ``` // 图片预览 const previewImg = (imgListJson: any, index = 0) => { let imgIdList = JSON.parse(imgListJson) let imgList = [] as any // 根据图片id获取图片的浏览地址 for (let index = 0; index < imgIdList.length; index++) { const element = imgIdList[index]; imgList.push(GetImgUrl(element)) } uni.previewImage({ urls: imgList, current: index }); } ```