如果图像 src 解析为 404 错误，则使用 Angular 隐藏 div答案

【问题标题】：use Angular to hide a div if an image src resolves with 404 Error如果图像 src 解析为 404 错误，则使用 Angular 隐藏 div
【发布时间】：2017-07-21 09:35:30
【问题描述】：

我有这段代码。它是从 Steam 获得的游戏徽标

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

这是与 ngFor 循环绑定的缩略图 div 的一部分。

现在了解一些情况，以及我的问题。

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

然后它会向用户显示这些游戏的列表以及游戏徽标。

有些“游戏”实际上并不是游戏，主要是专用服务器。但这些非游戏并没有附加任何图像。我想在它们出现时从网页中删除这些条目。我能想到的最好方法是捕捉任何 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>

【问题讨论】：

你可以使用ng-hide
如果 url 为空则隐藏 div
你能给我举个例子吗？我不知道该怎么做
是在url返回404时要隐藏的div.thumbnail吗？
是的，我想在url返回404时隐藏.thumbnaildiv

标签： javascript angular

【解决方案1】：

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

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

或任何其他元素：

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

或完全删除任何 div：

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

【讨论】：

这会和 ngFor 在同一行工作吗？......所以我的代码看起来像：<div class="thumbnail" style="color: black" *ngFor="let game of games" *ngIf="!game.image.hidden">
我不得不重新调整我的风格，但这很有效。谢谢:)
非常巧妙的解决方案，谢谢...！

【解决方案2】：

根据你所说的，我会这样做：

1 - 我会将完整的图片网址作为游戏的属性。

2 - 还为对象添加一个属性 hide。

3 - 使用控制器中的$http 服务查询图像。

4 - 查询图像时响应为 404，则属性 hide 的值应为 true。

5 - 由于您现在有一个属性隐藏，您可以转到 ng-hide="game.hide"

这是一个例子：

function MyCtrl($scope,$http) {
    $scope.games = [{name: 'Game 1', url: 'https://res.cloudinary.com/idemo/image/upload/ar_315:250,c_fill,e_saturation:50,g_faces,r_50,w_450/balloons.jpg'},
                {name: 'Game 2', url: 'https://res.cloudinary.com/idemo/image/upload/ar_315:250,c_fill,e_saturation:50,g_faces,r_50,w_450/balloons.jpg'},
                {name: 'Game 3', url: ''}]
      angular.forEach($scope.games, function(value, key) {
      $http.get('value.url').then(function(response){
        if(response.status === 404){
            value.hide = true
      }
      });
    });
}

【讨论】：