HarmonyOS鸿蒙Next中如何解决Image组件在更换网络图片失败时未显示占位图的问题

【问题现象】

当切换网络图片失败时，Image组件仍然显示上一次加载成功的图片，未显示默认占位图片。

问题代码如下：

Image(this.imageUrl)
  .alt($r('app.media.default_icon'))
  .width(100)
  .height(100)
Text('当前图片信息：' + this.imageDesc)
Button('url改变成不正常图片')
  .borderWidth(1)
  .onClick(() => {
    this.imageUrl =
      'https://xxx/xxx.png'
    this.imageDesc = '不正常网络图片'
  })

当点击Button时，由于模拟加载图片失败，应该显示占位图，却仍显示上一张正常加载的图片，如下图：

【背景知识】

Image组件加载图片资源。

【定位思路】

检查替换图片的方式是否存在问题。

通过相同的方式，使用正常网络图片Url去替换掉上一次加载的图片，检查是否可正常显示。

检查结果：图片可正常显示。

【解决方案】

通过onError监听加载图片异常，并重新设置Image组件显示的图片为占位图。

参考代码如下：

Image(this.imageUrl)
  .width(100)
  .height(100)
  .onError(() => {
    console.log('加载图片失败')
    this.imageUrl = fileUri.getUriFromPath(this.context.resourceDir + '/default_icon.png')
  })

当加载网络图片失败时，就可以正常达到显示默认占位图的效果。

效果如下：