鸿蒙:使用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%")
  }
}

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

相关推荐
猫林老师3 分钟前
HarmonyOS分布式数据库深度应用
harmonyos
我是华为OD~HR~栗栗呀27 分钟前
华为OD-Java面经-21届考研
java·c++·后端·python·华为od·华为·面试
LucianaiB2 小时前
【成长纪实】从“Hello World”到分布式实战的进阶之路
harmonyos·鸿蒙·成长纪实
万添裁3 小时前
基于ArkAnalyzer的HarmonyOS通用API多端安全性分析工具
harmonyos·ark
无风听海3 小时前
HarmonyOS之启动应用内的UIAbility组件
前端·华为·harmonyos
Bert丶seven4 小时前
鸿蒙Harmony实战开发教学(No.8)-Hyperlink超链接组件基础到进阶篇
华为·harmonyos·arkts·arkui·1024程序员节·开发教程
JohnnyDeng945 小时前
ArkTs-Android 与 ArkTS (HarmonyOS) 存储目录全面对比
android·harmonyos·arkts·1024程序员节
王嘉俊9255 小时前
HarmonyOS 超级终端与服务卡片开发:打造无缝多设备交互体验
华为·架构·harmonyos·arkts·1024程序员节
俩毛豆6 小时前
【图片】【编缉】图片增加水印(通过组件的Overlay方法增加水印)
前端·harmonyos
逻极9 小时前
HarmonyOS 5 鸿蒙多设备适配与分布式开发指南
分布式·华为·harmonyos·鸿蒙