如何在ArkTS中使用异步操作来实现图片加载？

Question

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

你可以使用异步操作来加载图片，这样可以避免在主线程上执行耗时的图片解码操作，从而提高应用性能。

@Entry
@Component
struct Index {
  @State imageSrc: string = '';

  loadImage() {
    const imagePromise = new Promise((resolve) => {
      const image = new Image();
      image.onload = () => {
        resolve(image.src);
      };
      image.src = 'path/to/your/image.png';
    });

    imagePromise.then((src) => {
      this.imageSrc = src;
    }).catch((error) => {
      console.error('Error loading image:', error);
    });
  }

  build() {
    Column() {
      Image(this.imageSrc)
        .width(300)
        .height(300)
      
      Button('Load Image')
        .onClick(() => {
          this.loadImage();
        })
        .width('100%')
        .height(100)
    }
    .width('100%')
    .height('100%')
  }
}

loadImage方法创建了一个Promise，用于异步加载图片。当图片加载完成时，更新imageSrc状态，从而在UI上显示图片。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。