最常见原因是urls数组含非图片URL或环境不支持API；需确保URL为完整HTTPS地址，H5配置白名单，小程序声明合法域名，并对static图片做跨端路径适配。

uni.previewImage 为什么点不了或没反应

最常见原因是传入的 urls 数组里混入了非图片 URL（比如空字符串、相对路径未补全、后端返回的错误地址），或者当前环境不支持该 API（如 H5 端未配置 domain 白名单，或小程序未在 manifest.json 中声明合法域名）。

实操建议：

• urls 必须是完整可访问的 HTTPS 地址（小程序和 H5 均强制要求），本地 static 目录下的图片需用 /static/xxx.jpg 这类绝对路径，且确保已在 H5 的 vue.config.js 中配置静态资源别名或通过 require 处理
• 调用前加校验：

  const validUrls = urls.filter(url => url && typeof url === 'string' && /\.(jpg|jpeg|png|gif|webp)$/i.test(url));

• H5 端若报错 Failed to execute 'postMessage' on 'DOMWindow'，大概率是跨域或 iframe 沙箱限制，此时应改用原生 <img alt="uni-app实现点击查看大图 uni-app使用previewImage方法" > + position: fixed 手动实现全屏预览

previewImage 在不同平台的行为差异

uni.previewImage 是封装层 API，各端底层能力不同：微信小程序支持双指缩放、长按保存；App 端（iOS/Android）默认无缩放，但可通过 showMenu 参数控制是否显示操作菜单；H5 端本质是新开窗口或弹层，不支持手势操作。

关键参数影响：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

• current：必须是数组中某个有效索引值，不能是字符串 ID 或随机数；若传错，部分安卓 App 会直接黑屏
• indicator：设为 'number' 时，H5 端可能不显示数字，只显示进度条；微信小程序正常
• loop：仅微信小程序和 App 支持循环滚动，H5 端始终禁用

如何让 previewImage 支持本地 static 图片并兼容所有端

直接写 static/xxx.png 在 H5 和小程序能跑，但在 App 端（尤其 iOS）可能加载失败，因为 App 内部使用的是 file:// 协议，而 uni.previewImage 默认按网络资源处理。

解决方案分两步：

• 对 static 下的图，用 uni.getRealPathSync 转成真实路径（仅 App 端有效）：

  const realPath = /mp-weixin|app/.test(uni.getSystemInfoSync().platform) 
    ? uni.getRealPathSync('/static/xxx.png') 
    : '/static/xxx.png';

• 更稳妥的做法是统一走网络路径：开发期用 http://localhost:8080/static/xxx.png，上线后替换为 CDN 地址，避免协议混用

点击缩略图后卡顿或白屏的排查方向

不是代码逻辑问题，而是资源加载时机导致的。常见于列表中大量图片未做懒加载，或 urls 数组过大（超过 100 张）时，微信小程序会触发内存警告并中断预览。

优化建议：

• 不要把整个列表的图片都塞进 urls，只传当前项及前后 2–3 张（用 currentIndex 动态截取）
• 预加载关键图：在 onLoad 阶段对即将预览的几张图调用 uni.preloadImage
• 安卓 App 上若出现白屏，检查是否启用了自定义基座 —— 某些低版本基座不支持 previewImage 的新参数，降级到 showMenu: false 可绕过

实际项目里最容易被忽略的是：H5 端调用 uni.previewImage 后，浏览器地址栏会跳转到图片 URL，导致页面丢失 Vue 实例状态。这时候不能只依赖 uni-app 封装，得在 H5 分支里主动拦截，换成本地弹层方案。