uni-app previewImage 黑屏主因是urls为空或路径非法，需传完整可访问地址、确保数据已加载并用$nextTick调用；轮播图预览须显式指定字符串current且与urls中对应项完全一致；真联动需自封装swiper预览层，previewImage无法控制滑动缩放；带参URL失效时应精简参数、编码URL或下载为本地路径。
uni-app
怎么触发才不黑屏
黑屏基本是
传了空数组或路径非法，尤其在商品详情页动态加载图片后直接调用时容易出问题。
实操要点：
参数必须是完整可访问的图片地址数组（不能是相对路径、本地临时路径
或未加载完成的
URL）
确保图片列表已渲染完毕且数据非空，建议在
或
后调用，避免 Vue 响应式更新未同步到 DOM
安卓真机上若用
拿到的
，需先
上传并返回线上地址，再传给
示例错误写法：
—— 若
还没请求回来，
就是
，直接黑屏。
轮播图点击放大时怎么保持当前索引
默认
会从第 0 张开始，但用户点的是第 3 张图，必须显式指定
。
关键点：
必须是字符串（不是数字），且必须严格等于
数组中对应项的值（大小写、协议、斜杠都要一致）
轮播组件如
的
返回的是下标，但点击事件里得把当前图的原始 URL 传过去，不能只传下标
如果图片有缩略图和原图两套地址，
数组里填原图地址，
填当前点击缩略图对应的原图地址（不是缩略图地址）
示例：
，其中
是点击时从
的
或事件对象里拿到的。
uni-app 图片预览怎么联动轮播图滑动
原生
不支持自定义 UI，所以“联动滑动”只能靠自己封装，不能依赖 API 自带行为。
可行做法：
不用
，改用
+
手写全屏预览层，监听
/
实现拖拽关闭、双指缩放（需引入
或手写手势逻辑）
若坚持用
，就别强求“联动”——它本身就是系统级全屏视图，iOS/安卓表现不一致，滑动反馈、回弹、缩放都不可控
注意：
在 H5 平台实际调用的是浏览器
跳转，无任何动画；App 平台才走原生预览，但无法注入自定义逻辑
简单结论：想真正联动控制，就得放弃
，自己实现预览容器。否则所谓“联动”，只是心理预期而已。
图片地址带参数时
失效怎么办
常见于 CDN 地址含
或
等参数，部分安卓机型（尤其旧版 WebView）会因 URL 过长或特殊字符解析失败导致白屏或报错
。
解决办法：
预览前对 URL 做最小化处理：去掉无意义参数，只保留原图地址；缩放/裁剪等操作改在预览层内用 CSS 或 canvas 实现
用
编码整个 URL（注意不是只编码参数值），再传入
数组
测试发现某些安卓 App 内置 WebView 对
+ 大量 query 的兼容性差，可尝试把图片先
到本地临时路径，再用
预览（仅限 App 平台）
最容易被忽略的一点：H5 平台下，带参数的图片地址若跨域，
会静默失败——连错误回调都不触发，必须提前检查 CORS 和地址可访问性。
previewImagepreviewImageurlstempFilePathdata:nextTick$nextTickuni.chooseImagetempFilesuni.uploadFilepreviewImageuni.previewImage({ urls: [this.goods.images[0]] })this.goods.imagesurls[undefined]previewImagecurrentcurrenturls@changeurlscurrentuni.previewImage({ urls: this.fullImages, current: this.fullImages[index] })indexswiper-itemdata-indexpreviewImageuni.previewImage@touchstart@touchmovevue-touchpreviewImagepreviewImagesrcpreviewImagepreviewImage?x-oss-process=xxx?imageView2/2/w/750Failed to load resourceencodeURIComponenturlshttps://uni.downloadFiletempFilePathpreviewImage