uni.previewImage 白屏主因是传入无效路径、iOS相册权限未真正生效或临时路径失效;需校验urls、提前授权、复制iOS临时路径并二次校验权限。

图片预览白屏,基本是 uni.previewImage 调用时传入了无效或未加载完成的 urls 数组,或在 iOS 真机上因原生相册权限/路径问题导致静默失败。
为什么 uni.previewImage 一调就白屏?
这不是 UI 渲染卡顿,而是预览窗口根本没起来——uni.previewImage 在底层调用原生相册组件时,若传入的图片路径非法、不存在、跨域,或 iOS 上未获得相册权限,就会静默退出,不报错、不弹窗、只留白屏。尤其容易发生在从 uni.chooseImage 或 uni.getFileSystemManager().readFile 拿到临时路径后直接传入预览的场景。
-
tempFilePaths是临时路径,仅当前会话有效;真机上若延迟调用uni.previewImage(比如加了setTimeout),该路径可能已失效 - iOS 真机未开启「照片」权限时,
uni.chooseImage返回的tempFilePath实际为空字符串或非法路径,但不会抛异常 - 传入
urls中混入null、undefined或空字符串,整个数组会被忽略,预览直接黑屏/白屏 - H5 端支持网络图,小程序端只认本地路径(
file://或tempFilePath),混用会导致白屏
uni.previewImage 前必须做的三件事
别急着调 API,先确保数据干净、权限到位、路径可用:
- 校验
urls数组:用urls.filter(Boolean)过滤掉空值,再确认每项都以file://或tempFilePath开头(小程序)或为合法 http(s) 链接(H5) - iOS 真机必须提前申请相册权限:
await uni.authorize({ scope: 'scope.writePhotosAlbum' }),否则后续所有图片操作都不可靠 - 如需从 base64 或 ArrayBuffer 构建预览图,必须先用
uni.getFileSystemManager().writeFile写入临时文件,再传filePath,不能直接传 base64 字符串
真机调试时怎么快速定位白屏原因?
白屏不出错,就得靠主动探测:
- 在调用
uni.previewImage前加console.log('preview urls:', urls),真机连 Safari Web Inspector 查看输出,确认数组内容和长度 - 对每个
url执行uni.getFileInfo,检查是否存在、大小是否 > 0;iOS 上若返回errMsg: "getFileInfo:fail file not found",说明路径已失效 - 把
urls数组长度硬编码为 1,用一个确定有效的路径(如启动页图标/static/logo.png)测试,排除逻辑问题 - 删掉
current和indicator等可选参数,最小化调用,避免字段格式错误干扰
iOS 相机拍完立刻预览的坑
用户用 <camera> 拍照后,ctx.takePhoto 返回的 tempImagePath 在 iOS 上有极短有效期,且部分机型会因沙盒限制无法被 uni.previewImage 直接读取:
- 不要在
success回调里只存路径,立刻调用预览;应先用uni.getFileSystemManager().copyFile复制到wxfile://可读路径 - 复制完成后,用新路径调用
uni.previewImage,而非原始tempImagePath - 若仍白屏,尝试加
delay: 100(毫秒),避开 iOS WKWebView 渲染竞争
最常被忽略的是:iOS 上 uni.previewImage 白屏往往不是代码写错了,而是相册权限没真正生效——哪怕用户点过“允许”,系统也可能返回假成功。必须用 uni.getStorage({ key: 'photoAuth' }) 持久化记录授权状态,并在每次预览前做二次校验。


















