HarmonyOS鸿蒙Next中如何使用Image组件加载网络图片并处理加载状态？

实现思路：

1. 使用 Image 组件直接加载网络图片 URL：

Image('https://example.com/image.png')
  .width(100)
  .height(100)

1. 使用 onComplete 和 onError 监听加载状态：

Image(this.imageUrl)
  .onComplete(() => {
    this.isLoaded = true;
  })
  .onError(() => {
    this.loadFailed = true;
  })

1. 使用 Stack 叠加实现占位图效果：

Stack() {
  if (!this.isLoaded) {
    Image($r('app.media.placeholder')).width('100%').height('100%')
  }
  Image(this.imageUrl)
    .onComplete(() => { this.isLoaded = true; })
}

1. 完整示例代码：

@Component
struct NetworkImage {
  @Prop src: string = '';
  @Prop width: number = 100;
  @Prop height: number = 100;
  @State isLoaded: boolean = false;
  @State loadFailed: boolean = false;

  build() {
    Stack() {
      // 占位图或错误图
      if (!this.isLoaded || this.loadFailed) {
        Image(this.loadFailed ? $r('app.media.error') : $r('app.media.placeholder'))
          .width(this.width)
          .height(this.height)
          .objectFit(ImageFit.Cover)
      }

      // 网络图片
      if (!this.loadFailed) {
        Image(this.src)
          .width(this.width)
          .height(this.height)
          .objectFit(ImageFit.Cover)
          .opacity(this.isLoaded ? 1 : 0)
          .onComplete(() => {
            this.isLoaded = true;
          })
          .onError(() => {
            this.loadFailed = true;
          })
      }
    }
    .width(this.width)
    .height(this.height)
  }
}

// 使用示例
@Entry
@Component
struct ImageListPage {
  @State imageList: string[] = [
    'https://example.com/image1.png',
    'https://example.com/image2.png',
    'https://example.com/image3.png'
  ];

  build() {
    Column({ space: 12 }) {
      ForEach(this.imageList, (url: string, index: number) => {
        NetworkImage({ src: url, width: 200, height: 150 })
      })
    }
    .width('100%')
    .padding(16)
  }
}