Angular 9 中丢失图像的错误处理答案

【问题标题】：Error handling for missing image in Angular 9Angular 9 中丢失图像的错误处理
【发布时间】：2021-01-18 19:10:35
【问题描述】：

我有一个 Angular 9 应用程序。如果 src 中指定的图像丢失，我需要显示替代图像。我不想使用 onerror，因为它已被弃用。

这是我发现的：

<div *ngFor="let entity of entities">
  <div>
    <img [src]="entity.imageUrl" (error)="onImageError(entity)" width="70" alt="IMAGE"/>

如何在 onImageError() 中重写 entity.imageUrl ？

我尝试了以下方法：

  onImageError(entity: IEntity) {
    entity.imageUrl = 'some-image.svg'
  }

但它说

36:3 错误预期调用签名：'onImageError' 有一个 typedef (tslint:typedef) @typescript-eslint/tslint/config

【问题讨论】：

【解决方案1】：

属性绑定是 TS 表达式。你理论上可以简单地说

<img [src]="entity?.imageUrl || alternateUrl" width="70" alt="IMAGE"/>

【讨论】：

【解决方案2】：

可能您的错误是由于某些打字稿设置造成的。

我建议您更改内联值，例如

(error)="entity.imageUrl = 'some-image.svg'"

或者将函数的返回类型定义为void

onImageError(entity: IEntity):void {
    entity.imageUrl = 'some-image.svg'
}

希望这会有所帮助！

【讨论】：

现在已弃用，我在原始问题中已经说过（请参阅stackoverflow.com/questions/57979955/…）。请不要出错
感谢您指出这一点，我已将我的代码更新为您所做的并且它有效。可能您的错误是由于某些打字稿设置造成的。我建议您更改内联值，例如 '(error)="entity.imageUrl = 'some-image.svg'" 或将函数的返回类型定义为 void 'onImageError():void'。希望这会有所帮助
这正是重点，因为 ts 2.7（或任何最新的角度） onerror 已被弃用，并且所有先前关于堆栈溢出的建议都与早期版本有关。我会尽快从评论中检查您的建议并报告结果。