javascript - 如何判断图像是否未在 Angular 中加载？

Question

目前我的组件中有这个

<img *ngIf="(showImage$ | async)" [alt]="image.alt [title]="image.title" [src]="image.src" (load)="imageHasBeenLoaded($event)" />

并且我在 imageHasBeenLoaded() 函数中执行了一些操作...但是如何处理失败的情况？例如。如果图片请求返回 404？

Answer 1

您可以使用(错误)这种方式在 404 的情况下设置默认图像，您可以从 asset 或 placeholder 设置默认图片

<img [src]="slide.img" (error)="slide.img='./assets/img/default.jpg'">