uni-app image 标签加载手机内的图片error事件报错

uni-app image 标签加载手机内的图片error事件报错

开发环境 版本号 项目创建方式
Windows window 11 HBuilderX

示例代码：

<template>  
  <view>  
    <image :src="i.local_path" [@error](/user/error)="imageError" style="height: 372rpx; margin-top: 30rpx;"></image>  
  </view>  
</template>

操作步骤：

<template>  
  <view>  
    <image :src="i.local_path" [@error](/user/error)="imageError" style="height: 372rpx; margin-top: 30rpx;"></image>  
  </view>  
</template>

预期结果：

能够正常的显示图片资源

实际结果：

没有显示且@error事件报错

bug描述：

图片地址：file:///storage/emulated/0/DCIM/Camera/F_2025-05-06-10-55-37.jpg
image标签不显示图片，且error回调触发，但是我用uni.previewImage可以查看到图片。
使用了三星S21(android 12)和iqoo Z1(android 12)都没有复现此现象


更多关于uni-app image 标签加载手机内的图片error事件报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

可以看下https://ask.dcloud.net.cn/article/36199，按道理安卓11就应该获取不到了

更多关于uni-app image 标签加载手机内的图片error事件报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢，奇怪就奇怪在我在Android 12可以获取到，但是在Android 10上不行。

这是一个典型的Android文件路径访问权限问题。在Android 10及以上版本，直接使用file://路径访问外部存储文件会受到限制，即使路径正确也可能无法加载。

解决方案：

  1. 使用uni-app的文件路径转换API：
// 将本地路径转换为可用路径
i.local_path = plus.io.convertLocalFileSystemURL(i.local_path)
  1. 或者使用base64方式加载：
uni.getFileSystemManager().readFile({
  filePath: i.local_path,
  encoding: 'base64',
  success: res => {
    this.imageData = 'data:image/jpeg;base64,' + res.data
  }
})
  1. 检查AndroidManifest.xml是否配置了文件访问权限：
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
回到顶部