HarmonyOS鸿蒙Next中如何选择本地图片显示在界面上

HarmonyOS鸿蒙Next中如何选择本地图片显示在界面上

今天有小伙伴问我，有没有打来本地图库，选择一张图片的代码，话都说到这儿了，我就来帮你看一下，

由于我阳了，手里只有一个nova10，刚好支持HarmonyOS3

于是我用api8的fa模型给他做了演示。下面是完整代码。

选择一张图片的

import mediaLibrary from '@ohos.multimedia.mediaLibrary';

@Entry
@Component
struct Index {
  @State message: string = '选择图片'
  @State img: string = ''

  private openGally() {
    mediaLibrary.getMediaLibrary().startMediaSelect({
      type: 'image',
      count: 1
    }).then((value) => {
      this.img = value[0];
    })
      .catch((err) => {
        console.log("An error occurred when selecting media resources.");
      });
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold).onClick(() => {
          this.openGally()
        })
        //显示一张
        Image(this.img).width(50).height(50)
      }
      .width('100%')
    }
    .height('100%').backgroundColor(Color.Orange)
  }
}

顺便我也帮着做了

显示多张图片

下面是完整代码

import mediaLibrary from '@ohos.multimedia.mediaLibrary';

@Entry
@Component
struct Index {
  @State message: string = '选择图片'
  @State img: string = ''
  private imgArray: string[] = [];

  private openGally() {
    mediaLibrary.getMediaLibrary().startMediaSelect({
      type: 'image',
      count: 5
    }).then((value) => {
      this.imgArray = value;
    })
      .catch((err) => {
        console.log("An error occurred when selecting media resources.");
      });
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold).onClick(() => {
          this.openGally()
        })
        //显示全部
        ForEach(this.imgArray, (item: any) => { // 循环数组创建每一个Item
          Image(item).height(50).objectFit(ImageFit.Cover)
            .margin(10).borderRadius(20)
        })
      }
      .width('100%')
    }
    .height('100%').backgroundColor(Color.Orange)
  }
}

预览图片

Text("预览图片").fontSize(50).onClick(()=>{
  let index = 1;
  mediaLibrary.getMediaLibrary().startImagePreview(this.imgArray, index).then(() => {
    console.log("Succeeded in previewing the images.");
  }).catch((err) => {
    console.log("An error occurred when previewing the images.");
  });