uni.previewImage黑屏主因是路径失效、权限未到位或平台资源限制;需校验tempFilePath有效性、提前申请相册权限、过滤空值、避免Referer/Token校验失败,并注意iOS沙盒隔离需copyFile持久化路径。

手机预览黑屏不是代码写错了,而是路径失效、权限没落到位、或平台对资源加载的限制没绕过去。真机上一调就白/黑,基本都卡在这三类问题上。
uni.previewImage 传入了非法或已失效的 tempFilePath
iOS 和 Android 的临时文件路径(tempFilePath)生命周期极短,尤其在 iOS 上,uni.chooseImage 或 ctx.takePhoto 返回的路径可能在几毫秒后就不可读;直接塞进 uni.previewImage,大概率静默失败、只留白屏。
- 务必在拿到
tempFilePath后立即校验:用uni.getFileInfo({ filePath })检查size > 0且无fail file not found - iOS 真机必须提前申请相册权限:
await uni.authorize({ scope: 'scope.writePhotosAlbum' }),否则tempFilePath可能为空字符串 - 若需延迟预览(比如加了
setTimeout),先用uni.getFileSystemManager().copyFile把临时路径复制到持久化目录(如uni.env.USER_DATA_PATH)再传入 -
urls数组里混入null、undefined或空字符串,整个数组会被忽略——务必用urls.filter(Boolean)过滤
H5 端预览黑屏常因 Referer 或 Token 校验失败
浏览器在新窗口打开图片时,请求头里的 Referer 为空或不匹配,服务器直接返回 403;带临时 token 的链接在新上下文里也拿不到 Cookie 或 Header,导致鉴权失败。
- 调试时右键图片 → “在新标签页中打开”,看是否能正常加载;不能,则是服务端策略问题
- 避免依赖 Referer:后端可配置白名单,或改用签名 URL(token 放 query,有效期足够长)
- 若必须用 Cookie 鉴权,H5 端建议改用
v-html+ 原生<img>标签做预览层,复用当前页面的请求上下文 - 不要把 base64 字符串直接塞进
urls——必须先writeFile成临时文件,再传filePath
安卓/iOS 原生层权限与清单配置没配全
即使 JS 层调用了 uni.authorize('camera'),原生侧没声明权限或描述语,系统根本不会弹窗,后续所有媒体操作都卡死。
- iOS:
ios/info.plist必须同时声明NSCameraUsageDescription和NSMicrophoneUsageDescription(哪怕不用麦克风,iOS 15+ 强制要求) - Android:
androidmanifest.xml要有<uses-permission android:name="android.permission.camera"/>和<uses-permission android:name="android.permission.record_audio"/> - targetSdkVersion ≥ 33 时,还需在
<application>加android:usesCleartextTraffic="true"(如果走 HTTP) - Android 动态权限不能只靠
uni.authorize:它只查状态,不触发弹窗;得配合plus.android.requestPermissions或跳设置页
最易被忽略的是:iOS 上 tempFilePath 在拍照后立刻预览,部分机型会因沙盒路径隔离导致 uni.previewImage 读不到;此时必须走 copyFile + 持久化路径,而不是信“刚拿到的肯定能用”。


















