Как определить, что изображение не загружено в Angular?

Question

В настоящее время у меня есть это в моем компоненте

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

и я выполняю некоторые действия в функции imageHasBeenLoaded () ... но как мне справиться со случаями, когда это не удается? например. если запрос изображения возвращает 404?

Answer 1

Если вы получите 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 2

метод imageHasBeenLoaded() можно привязать к событию error, которое срабатывает, если при загрузке внешнего файла (например, документа или изображения) возникает ошибка.

(error)="imageHasBeenLoaded($event)"

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

Answer 3

вы можете использовать (ошибка) таким образом, чтобы установить изображение по умолчанию в случае 404, вы можете установить изображение по умолчанию из актива или из placeholder

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