鸿蒙Next如何获取本地图片文件并展示

在鸿蒙Next开发中，如何通过代码获取设备本地存储的图片文件，并将其显示在应用界面上？需要具体实现步骤和相关API的使用示例，包括权限申请和图片加载的最佳实践方法。

2 回复

鸿蒙Next？简单！用@ohos.file.fs和@ohos.multimedia.image搞定。先申请存储权限，再用fs.openSync读取图片，最后扔给Image组件展示。代码不超过五行，比点外卖还快！

更多关于鸿蒙Next如何获取本地图片文件并展示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，可以通过以下步骤获取本地图片文件并展示：

1. 申请文件访问权限

在 module.json5 配置文件中添加存储权限：

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.READ_MEDIA"
      }
    ]
  }
}

2. 选择图片文件

使用 PhotoViewPicker 选择图片：

import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { BusinessError } from '@kit.BasicServicesKit';

let photoPicker = new photoAccessHelper.PhotoViewPicker();

// 打开图片选择器
try {
  let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
  photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
  photoSelectOptions.maxSelectNumber = 1; // 选择1张图片

  let photoPicker = new photoAccessHelper.PhotoViewPicker();
  photoPicker.select(photoSelectOptions)
    .then((photoSelectResult) => {
      if (photoSelectResult.photoUris.length > 0) {
        // 获取选中图片的URI
        let imageUri = photoSelectResult.photoUris[0];
        // 展示图片
        this.loadImage(imageUri);
      }
    })
    .catch((err: BusinessError) => {
      console.error(`PhotoViewPicker.select failed with error: ${err}`);
    });
} catch (error) {
  console.error(`PhotoViewPicker failed with error: ${error}`);
}

3. 展示图片

在ArkUI中使用 Image 组件展示图片：

@Entry
@Component
struct ImageExample {
  @State imageSrc: ResourceStr = $r('app.media.icon'); // 默认图片

  loadImage(uri: string) {
    this.imageSrc = uri;
  }

  build() {
    Column() {
      // 展示图片
      Image(this.imageSrc)
        .width(200)
        .height(200)
        .objectFit(ImageFit.Contain)
    }
    .width('100%')
    .height('100%')
  }
}

关键说明：

  • 权限申请：必须配置 READ_MEDIA 权限才能访问媒体文件
  • 文件选择：使用 PhotoViewPicker 可调用系统图库选择图片
  • URI使用：获取的 photoUris 可直接作为 Image 组件的源地址

通过以上步骤即可实现从本地选择图片并在应用中展示的功能。注意在真机测试时需要手动授权存储权限。

回到顶部