uni-app中uni.previewImage预览图片时ios设备出现黑屏问题

uni-app中uni.previewImage预览图片时ios设备出现黑屏问题

示例代码：

<image :src="item1.accessUrl" alt="" class="photos"  
@click.stop="imgListPreview(item,index1)">
</image>  

// 预览  
imgListPreview(item1, index) {  
    console.log('----')  
    let fileList=[];  
    item1.photoList.forEach((item2)=>{  
        fileList.push(item2.accessUrl)  
    })  
    uni.previewImage({  
        current: index, //预览图片的下标  
        urls: fileList //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以  
    })  
},


## 操作步骤：
- ios 点击图片预览 全是黑屏

## 预期结果：
- 想要正常预览显示图片

## 实际结果：
- 预览时，IOS环境下 预览都是黑屏，但是uni.previewImage执行成功的回调函数。 安卓正常

## bug描述：
app 使用 
```javascript
uni.previewImage({
current: index, //预览图片的下标
urls: fileList //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
})

预览时，IOS环境下 预览都是黑屏，但是uni.previewImage执行成功的回调函数。 安卓正常

开发环境 版本号 项目创建方式
Windows windows10 HBuilderX
手机系统 手机系统版本号 手机厂商
---------- ------------- ------------
iOS iOS 14 苹果

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

13 回复

有没有写过app的 预览时ios 不能正常预览全是黑屏

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


预览的都是后端返的网络图片

用其他地址的图片试试，看下是不是图片地址格式问题

但是安卓用这个地址都是正常的，只有Ios不正常，

我这个地址放在浏览器就是直接下载

上传到阿里云的，私有的。

可能是你背景颜色的事，透明的，背景ios是黑色的，在ios显示不了 可以使用plus.nativeUI.previewImage设置背景颜色

没有 用普通的网上地址可以，用阿里云私有的地址，就不行。

回复 1***@163.com: 可以来个地址，试试

请问博主解决了吗

服了 我的ios也是黑的 根本搞不定 还是用插件得了

我自己在项目中遇到的，仅供参考。uni.previewImage 在 iOS 中黑屏的原因探究

在使用 uni.previewImage 进行图片预览时，iOS 设备出现黑屏问题可能由多种原因引起。以下是一些常见的原因及解决方法：

1. 图片路径问题

确保传递给 uni.previewImage 的图片路径是正确的。如果路径是相对路径或本地路径，iOS 设备可能无法正确解析。

解决方法：

  • 确保图片路径是绝对路径或完整的网络路径。
  • 如果是本地图片，可以使用 plus.io.convertLocalFileSystemURL 将本地路径转换为可用的 URL。
let imagePath = plus.io.convertLocalFileSystemURL('/static/image.png');
uni.previewImage({
  urls: [imagePath]
});

2. 图片格式问题

iOS 设备对某些图片格式支持不完全，可能导致无法正常显示。

解决方法：

  • 确保图片格式是 iOS 支持的格式，如 jpg、png 等。
  • 避免使用 webp 格式，因为 iOS 可能不支持。

3. 图片加载问题

如果图片未完全加载或加载失败，可能会导致黑屏。

解决方法：

  • 在调用 uni.previewImage 之前，确保图片已经成功加载。
  • 可以使用 uni.getImageInfo 来预加载图片，确保图片可用。
uni.getImageInfo({
  src: 'https://example.com/image.png',
  success: (res) => {
    uni.previewImage({
      urls: [res.path]
    });
  }
});

4. iOS 系统问题

某些 iOS 系统版本可能存在兼容性问题。

解决方法：

  • 确保 iOS 系统版本是最新的。
  • 如果问题仅在特定 iOS 版本上出现，尝试更新系统或使用其他兼容性解决方案。

5. uni-app 版本问题

uni-app 的某些版本可能存在 bug，导致 uni.previewImage 在 iOS 上无法正常工作。

解决方法：

  • 确保使用的是最新版本的 uni-app。
  • 如果问题依然存在，可以尝试降级或升级 uni-app 版本。

6. 其他可能的原因

如果以上方法都无法解决问题，可能是其他未知原因导致的。

解决方法：

  • 检查控制台是否有报错信息，根据报错信息进行排查。
  • 尝试使用其他图片预览插件或自定义图片预览组件。

示例代码

以下是一个完整的示例代码，展示了如何正确使用 uni.previewImage：

uni.getImageInfo({
  src: 'https://example.com/image.png',
  success: (res) => {
    uni.previewImage({
      urls: [res.path]
    });
  },
  fail: (err) => {
    console.error('图片加载失败', err);
  }
});
回到顶部