uni.previewimage 的 current 参数必须传数字索引而非 url 或字符串,且需确保不越界;跨端图片路径需分类处理,推荐统一使用 cdn;长按保存须通过 longpressactions 配置;禁用自定义预览组件,应直接调用原生预览。

uni.previewImage 的 current 参数必须传数字索引
点开预览总是显示第一张图,或者白屏——八成是 current 传错了。它不是 URL,也不是字符串 ID,而是 urls 数组里的下标(从 0 开始)。哪怕你只预览一张图,也要写成 urls: [singleUrl],然后 current: 0。
常见错误:
-
current: 'https://xxx.jpg'—— 小程序和 App 大概率失效,H5 偶尔能蒙混过关 -
current: 1但urls只有 1 项 —— 越界,fallback 到 0 -
urls里有重复 URL,用字符串匹配current会定位到第一次出现的位置,不可控
正确做法:点击第 n 张图时,提前记录它的索引,比如 @click="preview(index)",再传给 uni.previewImage({ current: index, urls: this.imgList })。
图片路径在不同端必须分类处理
同一段代码,在 H5、小程序、App 上跑不通,大概率是路径类型不兼容。uni-app 不做自动转换,你得自己兜底。
各端要求:
- 微信小程序:
urls必须是 HTTPS 网络地址,或 base64 字符串(带data:image/png;base64,前缀);tempFilePath或/static/xxx.jpg直接传进去会静默失败 - App:
file://、_www/、http://都支持,但 H5 不认file:// - H5:
http(s)://或项目/static/下的相对路径(需确保已构建进资源);file://和临时路径一律被浏览器拦截
跨端稳妥方案:服务端统一托管图片,前端只传 CDN 地址;若必须用本地图,App 和小程序可分别走 uni.getFileSystemManager().readFileSync 转 base64(注意大图超长会卡死),H5 则 fallback 到 /static/ 路径。
长按保存不能靠 @longpress,得用 longPressActions
在 <image></image> 上写 @longpress="save" 在微信小程序里完全没反应——小程序禁止对原生 <image></image> 绑定长按事件。唯一有效路径是通过 uni.previewImage 的 longPressActions 配置项。
注意点:
-
longPressActions仅在 App 和微信小程序生效,H5 不支持,别写进去指望通用 -
itemList最多 3 项,超出会被截断;文字用简体中文,避免 emoji 导致 iOS 崩溃 -
success回调里的res.index是当前预览图在urls中的真实索引(不是你传的current!用户可能已滑动),取图时要用this.imgList[res.index],并校验越界 - 保存前必须先
uni.downloadFile拿到本地路径,再uni.saveImageToPhotosAlbum;H5 没有相册权限概念,直接不支持
别手写 swiper + image 实现预览
有人为了“可控”硬写全屏预览组件,结果卡顿、双指缩放失灵、低端安卓机闪退——这不是代码写得差,是 WebView 渲染机制的硬伤。
根本问题:
- Webview 对
transform: scale()重绘优化极差,iOS WKWebView 尤其掉帧 - swiper 内部拦截
touchmove,双指间距变化很难精准捕获 - 每张图都用
<image></image>加载,内存随图数线性暴涨,10 张 2MB 图就超 20MB
除非你要加水印、自定义 toolbar 或下载按钮,否则直接用 uni.previewImage。它调起的是系统级预览器,性能稳定、手势原生、跨端一致。需要缩放?那是平台限制,不是你代码的问题。











