Как удалить элемент изображения из DOM, когда ошибка 403 возникает в Angular

Question

Есть ли способ, которым я могу удалить весь элемент изображения из DOM, когда ошибка 403 возникает с этим изображением при извлечении его из API, так что title карты расширяется на всю ширину карты.

Это то, что я пробовал до сих пор

HTML

<div *ngFor="let item of items">
  <ion-row>
    <ion-col>
      <div>{{ item.title }}</div>
    </ion-col>
    <ion-col size="4" class="ion-text-center">
      <img src="{{ item.imageurl }}" (error)="handleImageError($event)" />
    </ion-col>
  </ion-row>
</div>

TS

  handleImageError(e) {
    e.target.style.display = 'none';
  }

Я создал рабочий пример с использованием StackBlitz. Может ли кто-нибудь, пожалуйста, помогите.

Answer 1

Ваша проблема связана с вашим контейнером. У вас есть две колонки. Тогда вы будете скрывать столбец вместо изображения. Вы можете использовать ngIf https://stackblitz.com/edit/ionic-a5wy8u

<ion-col *ngIf="!car.isSHOW">
    <ion-card-content>
        <img src="{{car.url}}" (error)="handleImageError(car)">
    </ion-card-content>
</ion-col>

в компоненте изменить его на true

handleImageError(e) {
   e.isSHOW = true;
  }

Answer 2

Вы ищете * ngIf в контейнере изображений, поскольку он удаляет / добавляет элемент из DOM. И вам также придется немного изменить handleImageError.

StackBlitz

<div *ngFor="let item of items">
  <ion-row>
    <ion-col>
      <div>{{ item.title }}</div>
    </ion-col>
    <ion-col *ngIf="!item.hide" size="4" class="ion-text-center">
      <img [src]="item.imageurl" (error)="handleImageError(item)" />
    </ion-col>
  </ion-row>
</div>

И затем в сценарии, в handleImageError - сделать это:

items = [
  {imageUrl: '5353ssa.png'},
  {imageUrl: 'https://latam.kaspersky.com/content/es-mx/images/product-icon-KSOS.png'},
  {imageUrl: '5353ssa.png'},
  {imageUrl: '5353ssa.png'},
]

handleImageError(image) {
  image.hide = true;
}

Answer 3

Я бы посоветовал вам использовать ngIf, чтобы скрыть полный образ, способ, которым я бы указал адрес:

1. Создайте логическую переменную в верхней части вашего компонента.

   let shouldHide = false;

2. Используйте эту переменную и ngIf для вашего изображения, вы можете использовать это на уровне контейнера или на уровне самого изображения, например.

    <img src="{{ imageurl }}" (error)="handleImageError($event)"  *ngIf="shoudHide"/>
   

3. Назначить true в случае ошибки

   handleImageError (e) {e.target.style.display = 'none'; this.shouldHide = true; }

Надеюсь, это поможет