鸿蒙：使用Image组件展示相册图片或rawfile图片

2501_919749032025-10-02 10:56

1、前言

实现展示相册图片的方法，通过获取到图片的uri，将uri交给Image组件展示即可。如果是展示本地的rawfile图片，那么只需要获取图片的文件名及后缀，然后将这个字符串交给Image，通过$rawfile()方式展示即可。

2、参考文档

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/photoaccesshelper-photoviewpickerhttps://developer.huawei.com/consumer/cn/doc/harmonyos-guides/photoaccesshelper-photoviewpicker

3、核心思路

通过媒体文件资源管理器拉起系统相册，然后获取到选择的图片uri，将uri数组每一项字符串交给Image组件渲染

项目rawfile目录下的图片加载则更为简单，将内部图片的文件名＋后缀，放到同一个字符串数组中，我们直接循环渲染即可，每一项交给Image，通过$rawfile()展示。

4、运行效果

5、完整代码

Index.ets

复制代码

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

async function selectImage(): Promise<Array<string>> {
  const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
  photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE。
  photoSelectOptions.maxSelectNumber = 5; // 选择媒体文件的最大数目。
  const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
  const photoSelectResult = await photoViewPicker.select(photoSelectOptions)
  return photoSelectResult.photoUris
}

function selectImages(): Array<string> {
  const arr: Array<string> = ["1.jpg", "2.jpg", "3.jpg"]

  return arr
}

@Entry
@ComponentV2
export struct Index {
  @Local imageUri: string[] = []

  build() {
    List() {
      ListItem() {
        Column({ space: 20 }) {

          ForEach(this.imageUri, (uri: string) => {
            Image(uri)
              .width(200)
            Text(uri)
            Image($rawfile(uri))
              .width(200)
          })

          Button("从相册选择图片并展示")
            .onClick(async () => {
              this.imageUri = await selectImage()
            })

          Button("展示项目本地的rawfile图片")
            .onClick(() => {
              this.imageUri = selectImages()
            })

        }
        .width("100%")
        .justifyContent(FlexAlign.Center)

      }
    }
    .width("100%")
    .height("100%")
  }
}

有帮助的话，可以点赞或收藏