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

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、核心思路

  1. 通过媒体文件资源管理器拉起系统相册,然后获取到选择的图片uri,将uri数组每一项字符串交给Image组件渲染
  2. 项目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%")
  }
}

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

相关推荐
2501_919749033 小时前
鸿蒙:PersistenceV2页面间持久化存储数据
华为·harmonyos
yenggd4 小时前
QoS之拥塞管理两种配置方法
网络·华为
一尘之中9 小时前
操作系统内核架构深度解析:从单内核、微内核到鸿蒙分布式设计
架构·harmonyos·ai写作
咕噜企业签名分发-淼淼15 小时前
App防止恶意截屏功能的方法:iOS、Android和鸿蒙系统的实现方案
android·ios·harmonyos
安卓开发者15 小时前
鸿蒙NEXT NearLink Kit入门指南:重新定义短距无线通信
华为·harmonyos
科技风向标19 小时前
2025 随身 WiFi 行业报告:格行 WiFi6 技术下放百元市场,中兴华为机型竞争力分析;五款机型芯片方案 / 网速 / 质保深度横评
网络·科技·物联网·华为·随身wifi·格行
想不明白的过度思考者1 天前
鸿蒙系统:不止于“手机OS”的全场景智能操作系统
华为·智能手机·harmonyos
IT WorryFree1 天前
华为光模块命名规则
华为
搬砖的小码农_Sky2 天前
如何将安卓应用迁移到鸿蒙?
android·华为·harmonyos