gpt4 book ai didi

javascript - 如果图像 src 解析为 404 错误,则使用 Angular 隐藏 div

转载 作者:行者123 更新时间:2023-11-30 08:26:16 25 4
gpt4 key购买 nike

我有这段代码。它是从steam上得到的一个游戏的logo

<div class="col-md-3">
<img src="http://cdn.edgecast.steamstatic.com/steam/apps/{{game.steamID}}/header.jpg" style="width: 100%; height: auto;"/>
</div>

这是绑定(bind)到 ngFor 循环的缩略图 div 的一部分。

现在了解一些背景和我的问题。

我的应用使用 steam WebAPI 获取用户拥有的所有游戏的列表,并将其存储在数据库中。

然后它会向用户显示这些游戏的列表,并带有游戏 Logo 。

有些“游戏”实际上不是游戏,主要是专用服务器。但是这些非游戏没有附加任何图像。我想在它们突然出现时从网页中删除这些条目。我能想到的最好方法是捕捉任何 404 错误并告诉缩略图隐藏自己。

所以我的问题是,如果图像 url 返回 404 错误,是否可以使用 ngIf 隐藏 div?

编辑

我正在为可能想要查看大图的任何人添加整个缩略图的代码。

<div class="thumbnail" style="color: black" *ngFor="let game of games">
<div class="row">
<div class="col-md-3">
<img src="http://cdn.edgecast.steamstatic.com/steam/apps/{{game.steamID}}/header.jpg" style="width: 100%; height: auto;"/>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<h2>{{game.name}}</h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<!--<p>{{countRequests(game.id)}} People want to play<span class="pull-right">Sinse: GET_LAST_REQUEST_DATE</span></p>-->
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="centerBlock">
<div class="btn-group btn-group-lg btn-block">
<button *ngIf="page > 1" class="btn btn-primary btn-outline" (click)="previousPage()">Previous</button>
<button *ngFor="let page of pages" class="btn btn-primary btn-outline"(click)="gotoPage(page)">{{page}}</button>
<button *ngIf="page < maxPages" class="btn btn-primary btn-outline" (click)="nextPage()">Next</button>
</div>
</div>
</div>
</div>

最佳答案

使用 Angular 事件你可以隐藏图像本身:

<img #image src="..." (error)="image.hidden = true" [hidden]="image.hidden">

或任何其他元素:

<div [hidden]="image.hidden"></div>

或者完全删除任何 div:

<div *ngIf="!image.hidden"></div>

关于javascript - 如果图像 src 解析为 404 错误,则使用 Angular 隐藏 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45227044/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com