uni.previewImage 可直接实现九宫格图片预览，但需确保 urls 为完整 URL 数组，current 为 urls 中存在的字符串；九宫格用 flex + aspect-ratio + mode="aspectFill" 布局，点击时传对应 src 而非索引。
uni-app 中用 uni.previewImage 实现九宫格图片预览
直接用 uni.previewImage 就能实现类似微信朋友圈的点击放大、左右滑动、缩放查看，不需要自己写 canvas 或手势逻辑。关键在于传参格式和图片数组构造——它要求所有图片必须是**完整可访问的 URL（含协议）**，本地临时路径（如 uni.chooseImage 返回的 tempFilePaths）在 H5 环境下无法预览，小程序和 App 则支持。
常见错误：把 tempFilePaths[0] 直接传给 current，但 current 必须是字符串，且必须与 urls 数组中某一项完全一致（包括大小写、斜杠方向）。iOS 小程序对路径敏感，file:///var/.../1.jpg 和 file:///var/.../1.JPG 会被视为不同图片。
- 确保
urls是一个长度 ≥1 的字符串数组，每项是有效图片地址（网络图或本地临时路径） -
current必须是urls中存在的某一项（不能是索引，不能是相对路径） - H5 端只支持网络图片；App 和小程序支持本地临时路径，但需注意生命周期——
tempFilePaths在页面跳转后可能失效 - 如果图片来自
uni.chooseImage，建议在调用uni.previewImage前做一次Array.map校验，避免空值或 null 入数组
九宫格布局怎么写才不卡、不重叠、适配多端
uni-app 的 flex 布局在各端表现基本一致，但图片宽高比控制容易出问题。别用固定 width/height，优先用 aspect-ratio + object-fit: cover，再配合 flex-wrap 控制换行。
典型翻车点：用 v-for 渲染 image 标签时没加 mode="aspectFill"，导致拉伸变形；或容器未设 max-width，在 iPad 上单行显示 9 张图挤成一条缝。
- 每张图外层用
view包裹，设flex: 1+max-width: 33.33%（三列）+padding: 4px -
image标签加mode="aspectFill"和style="width: 100%; height: 100%;" - 父容器设
display: flex; flex-wrap: wrap; justify-content: flex-start; - 为防首屏白屏，建议给
image加lazy-load（仅 App 和小程序生效），H5 可配合uni.$on('imageLoad')做加载状态
点击某张图时如何准确定位到对应索引
不能靠 index 传参直接当 current，因为 current 要的是图片地址字符串。正确做法是：点击时拿到该图的 src（即 urls[index]），再把它作为 current 传入。
容易忽略的边界：数组为空、index 越界、src 是空字符串或 undefined。这时候 uni.previewImage 会静默失败，控制台无报错。
- 绑定点击事件时，用
@click="handlePreview(index)"，在方法里先校验if (!urls[index]) return handlePreview(i) { uni.previewImage({ current: urls[i], urls }); }- 若图片数组含重复 URL（比如同一张图上传两次），
current仍会定位到第一个匹配项，不会报错但体验错乱 - 需要高亮当前页码？目前
uni.previewImage不暴露回调，只能靠用户手动滑动，无法主动跳转或监听位置
安卓 App 点击黑屏、iOS 图片模糊的排查重点
黑屏多因图片路径协议缺失（如 http:// 写成 //），模糊则大概率是原图分辨率低 + mode="aspectFill" 拉伸放大所致。真机调试时记得打开「调试器 → Network」看图片请求是否 200。
- 安卓 App：检查是否开启了 HTTPS 强制校验（
android:usesCleartextTraffic="true"未配置导致 HTTP 图片加载失败） - iOS：确认图片尺寸 ≥ 750px 宽，否则放大后像素感明显；避免用 base64 字符串传给
urls（部分 iOS 版本解析失败） - 所有端：禁用
transform: scale()或zoom类样式影响父容器，会导致image渲染异常 - 预览前可加一层 loading 提示，因为
uni.previewImage启动有延迟，尤其首次调用时要初始化原生模块
最麻烦的其实是图片来源混杂——既有网络图、又有本地临时路径、还有用户相册选中的 file:// 地址。这种场景下，建议统一走 uni.uploadFile 上传后再预览，而不是硬扛多端路径兼容性。
