Image加载失败时显示不同图片
================

#### 问题现象

如何在Image组件加载失败时，将加载中的图片替换为失败状态的图片？

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/6e/v3/jvFeqMJUS2uAR-ISSEFdkg/zh-cn_image_0000002628603744.gif?HW-CC-KV=V1&HW-CC-Date=20260709T133950Z&HW-CC-Expire=86400&HW-CC-Sign=E7CA54AADFA5A8BA14C4F123B14185BF3F87099D12AEF1AE4EA6E2AD68D6E8BB "点击放大")

#### 背景知识

[Image](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image)是图片组件，通过图片数据源获取图片，用于后续渲染展示。当加载图片失败或图片尺寸为0时，图片组件大小自动为0，不跟随父组件的布局约束；加载成功且组件不设置宽高时，其显示大小自适应父组件。

#### 解决方案

引入状态变量控制图片的加载状态，当加载失败时切换状态为“error”，具体步骤如下：

1.  引入状态变量status，并设置初始值“loading”。
2.  通过alt设置图片加载时显示的占位图，并通过状态变量status控制图片变化。
3.  在回调函数onError中设置状态变量status为“error”，实现图片切换功能。

完整示例参考如下：

@Entry
@Component
struct ImageComponentExample {
  @State status: string \= 'loading';
  @State loadingImg: Resource \= $r('sys.media.clone\_app\_badge\_1');
  @State errorImg: Resource \= $r('sys.media.clone\_app\_badge\_2');

  build() {
    Column() {
      Image('')
        .width(300)
        .height(300)
        .margin(15)
        .alt(this.status \=== 'loading' ? this.loadingImg : this.errorImg)
        .onError(() \=\> {
     _     // 通过定时器延迟3s，方便观察加载中和加载失败过程图片的切换_
          setTimeout(() \=\> {
            this.status \= 'error';
          }, 3000);
        });
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }
}