有什么办法可以在从API获取图片时,当该图片发生403错误时,将整个图片元素从DOM中删除,从而使 title
的宽度扩展到整个卡片的宽度。
这是我目前所尝试的
超文本标记语言
<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。谁能帮帮我。
您正在寻找的是 *ngIf 容器上,因为它从DOM中删除了添加元素。而且你还需要稍微修改 handleImageError
.
<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;
}
你的问题是关于你的容器。你有两列。那么你将隐藏列而不是图像。你可以使用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;
}
我建议你使用ngIf来隐藏完整的图像,我的解决方法是
在组件的顶部创建一个布尔变量。
让shouldHide = false。
在你的图片上使用这个变量和ngIf,你可以在容器级别或图片本身级别使用这个变量,比如。
<img src="{{ imageurl }}" (error)="handleImageError($event)" *ngIf="shoudHide"/>
如果出现错误,则赋值为true。
handleImageError(e) {e.target.style.display = 'none';this.shouldHide = true;}。
希望能帮到你