uni.previewImage 可直接调用实现多端原生预览,但需注意:urls 必须为数组;current 传数字索引或严格匹配的 URL 字符串;H5 不支持 file:// 和未部署的 /static/ 路径;微信小程序需域名白名单;App 支持 file:// 临时路径,小程序仅认网络地址、base64 或白名单 CDN;多端路径应动态判断平台适配。
直接用 uni.previewimage 就行,不用自己写组件、不依赖第三方库,各端原生体验最稳。
为什么 uni.previewImage 调用后没反应
八成是参数或路径踩了坑:
-
urls必须是数组,哪怕只预览一张图也要写成['/static/a.jpg'],传字符串会静默失败 -
current如果传的是索引(推荐),必须是数字且在urls范围内;如果传 URL 字符串,必须和urls里某一项**完全一致**(协议、大小写、斜杠、查询参数都不能差) - H5 端不支持
file://和未部署的/static/xxx.jpg(开发时能看,打包后 404);得确保图片真能被浏览器直接访问,比如走http://或已部署到/static/下并正确引用 - 微信小程序要求所有图片地址必须在
manifest.json的「微信小程序服务器域名」白名单里,否则真机上点不动、控制台也不报错
uni.previewImage 多图预览怎么指定当前图
别靠猜,明确传 current 参数:
- 传数字索引最可靠:
current: 2表示从urls[2]开始显示 - 传 URL 字符串也可以,但要严格匹配:
current: 'https://cdn.com/1.jpg',且该地址必须存在于urls数组中 - 如果不传
current,默认从urls[0]开始,用户点第 5 张图却看到第 1 张,体验就断了
App 和小程序对本地图片路径的处理差异
同一段代码,在 App 和小程序里可能一个正常一个报错,根源在路径合法性:
- App 端(iOS/Android):支持
file://临时路径,比如uni.chooseImage返回的tempFilePaths[0]可直接塞进urls - 小程序端(尤其微信):只认网络地址(
https://)、base64 字符串,或已配置白名单的 CDN 域名;/static/路径在开发者工具里可能“假装”能用,真机必挂 - 临时方案(仅调试):用
uni.getFileSystemManager().readFileSync同步读取/static/图片转 base64,但注意长度限制,大图会卡死或内存溢出
最易被忽略的点:多端路径一致性不是靠“写对一次”就能解决的,而是得在运行时做判断——比如根据 uni.getSystemInfoSync().platform 动态拼接图片地址,或者统一走 CDN。否则上线后 H5 用户能看,微信用户点开黑屏,排查起来反而更费时间。











