Question

目前我在我的组件中有这个

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

我在imageHasBeenLoaded（）函数中执行了一些操作......但是如何处理失败的情况呢？例如。如果图像请求返回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中是否未加载图像？

3 个答案: