uni-app previewImage 图片预览黑屏

uni-app previewImage 图片预览黑屏

开发环境 版本号 项目创建方式
HBuilderX 3.3.6 云端

示例代码：

plus.nativeUI.previewImage(["file:///storage/emulated/0/Android/data/plus.xxx/apps/xxx/doc/images/1641449864842.jpg","file:///storage/emulated/0/Android/data/plus.xxx/apps/xxx/doc/images/2.jpeg"], {  
    indicator: 'number',  
    loop: true  
});

操作步骤：

plus.nativeUI.previewImage(["file:///storage/emulated/0/Android/data/plus.xxx/apps/xxx/doc/images/1641449864842.jpg","file:///storage/emulated/0/Android/data/plus.xxx/apps/xxx/doc/images/2.jpeg"], {  
    indicator: 'number',  
    loop: true  
});

预期结果：

成功预览

实际结果：

黑屏

bug描述：

previewImage 图片预览黑屏，只是黑屏不显示图片（都不显示），能显示图片个数 indicator ，能滑动翻页。小米 redmi 10x 就没问题。同样的地址，同样的图片。

产品分类：HTML5+ 手机系统：Android 手机系统版本号：Android 9.0 手机厂商：小米 手机机型：mi 6x 打包方式：云端


更多关于uni-app previewImage 图片预览黑屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

图片怎么获取的？ 提供完整代码

更多关于uni-app previewImage 图片预览黑屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


不用吧，同样的代码两个手机，一个行，一个不行，图片地址肯定没错。

根据你的描述，这是一个典型的Android文件路径访问权限问题。在Android 9.0及以上版本中，系统对文件访问权限进行了更严格的限制，特别是对应用私有目录外的文件访问。

问题分析：

  1. 你使用的路径 file:///storage/emulated/0/Android/data/plus.xxx/apps/xxx/doc/images/ 是应用私有目录，但不同Android版本对此类路径的访问权限处理不同
  2. 小米Redmi 10x能正常显示而mi 6x黑屏，很可能是系统版本差异导致的权限问题
  3. 能显示indicator和滑动翻页，说明previewImage组件本身工作正常，只是无法加载图片数据

解决方案：

方案一：使用相对路径（推荐）

// 假设图片存储在应用doc目录下
plus.nativeUI.previewImage(["_doc/images/1641449864842.jpg", "_doc/images/2.jpeg"], {
    indicator: 'number',
    loop: true
});

方案二：使用绝对路径时添加file协议前缀

// 确保路径格式正确
var imgPath = plus.io.convertLocalFileSystemURL("_doc/images/1641449864842.jpg");
plus.nativeUI.previewImage([imgPath], {
    indicator: 'number',
    loop: true
});

方案三：检查文件是否存在

// 预览前先验证文件可访问性
var filePath = "_doc/images/1641449864842.jpg";
plus.io.resolveLocalFileSystemURL(filePath, function(entry) {
    // 文件存在，进行预览
    plus.nativeUI.previewImage([entry.toLocalURL()], {
        indicator: 'number',
        loop: true
    });
}, function(e) {
    console.log("文件不存在或无法访问：" + e.message);
});
回到顶部