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

我有这段代码。这是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>

{{game.name}
以前的
{{page}
下一个

根据你的话，我会这么做：

1-我会把完整的图像url作为游戏的属性

2-还向对象添加属性隐藏

3-使用控制器中的

$http

服务查看图像

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

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
      }
      });
    });
}

---

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

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

或任何其他元素：

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

或完全删除任何div：

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

如果url为空，您可以使用

ng hide

隐藏div。您能举个例子吗？我不知道该怎么做。如果url返回404，你想隐藏的是div。缩略图吗？是的，我想隐藏

。当url返回404时，缩略图
div。这与ngFor在同一行上有效吗？。。。。。。所以我的代码看起来像：
我不得不稍微调整一下我的风格，但这很管用。谢谢：）