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

Question

我有一个 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

Answer 1

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

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

Answer 2

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

我建议您像这样更改内联值

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

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

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

希望这有帮助！

Answer 3

使用内联（错误）

而不是创建一个处理 ts 文件内损坏图像的方法，

只需使用这个，但要小心图像路径，不要陷入试图获取路径的循环中

<img #iconRef [src]="item.icon" [alt]="item.name" (error)="iconRef.src = 'your-path\\default-thumbnail.png'">

这个想法很简单，只需进行本地引用并在发生错误时更改路径即可。