当Angular出现403错误时,如何从DOM中删除图片元素?

问题描述 投票:0回答:1

有什么办法可以在从API获取图片时,当该图片发生403错误时,将整个图片元素从DOM中删除,从而使 title 的宽度扩展到整个卡片的宽度。

card with no image

这是我目前所尝试的

超文本标记语言

<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。谁能帮帮我。

html css angular
1个回答
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;
}

2
投票

你的问题是关于你的容器。你有两列。那么你将隐藏列而不是图像。你可以使用ngIfhttps:/stackblitz.comeditionic-a5wy8u

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

在组件中把它改为真

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

0
投票

我建议你使用ngIf来隐藏完整的图像,我的解决方法是

  1. 在组件的顶部创建一个布尔变量。

    让shouldHide = false。

  2. 在你的图片上使用这个变量和ngIf,你可以在容器级别或图片本身级别使用这个变量,比如。

     <img src="{{ imageurl }}" (error)="handleImageError($event)"  *ngIf="shoudHide"/>
    
    1. 如果出现错误,则赋值为true。

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

希望能帮到你

© www.soinside.com 2019 - 2024. All rights reserved.