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

Question

目前我的组件中有这个

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

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

Answer 1

您可以使用（错误）这种方式设置默认图片以防 404，您可以从资产或 placeholder

设置默认图片

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

Answer 2

如果你得到 404。我很确定你应该在路径或文件名中有错误。或者你没有把它们放在你指定的路径中。像 ./assets/img/default.jpg。

我的项目代码看起来像。

<mat-card *ngFor="let respo of work.Used" fxFlexAlign="auto" style="background:#E0E0E0; height:40px; margin-left: 5px; margin-bottom: 5px; text-align: center; padding: 5px;">
    <img style="height: 40px; margin:auto;" src={{respo}} alt="Photo of a Shiba Inu">
  </mat-card>

我通过 json 文件为每个图像提供源，最终到达这部分代码并在 src={{respo}} 处结束。我认为您也应该使用 {{}} 。如果你得到错误，那应该意味着你拼错了。请注意路径和名称 区分大小写。

Answer 3

您可以将 imageHasBeenLoaded() 方法绑定到 error 事件，该事件在加载外部文件（例如文档或图像）时发生错误时触发。

(error)="imageHasBeenLoaded($event)"

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

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

How to tell if an image was not loaded in Angular?

javascript

logic

async.js

angular