I have this piece of code. It get's the logo of a game from steam

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

this is part of a thumbnail div which is tied to a ngFor loop.

now for some context, and my question.

My app uses the steam WebAPI to get a list of all the games a user owns, and stores it in a database.

it then displays the list of these games to the user, with the game logo.

there are some "games" that aren't actually games, dedicated servers mostly. but these non-games don't have any images attached to them. I want to remove these entries from the webpage whenever they crop up. The best way I can think of is to catch any 404 errors and tell the thumbnail to hide itself.

so my question is, is it possible to use ngIf to hide a div if the image url es back with a 404 error?

EDIT

I'm adding the entire thumbnail's code for anyone that might want to look a the bigger picture.

<div class="thumbnail" style="color: black" *ngFor="let game of games">
<div class="row">
    <div class="col-md-3">
        <img src="/{{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>

I have this piece of code. It get's the logo of a game from steam

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

this is part of a thumbnail div which is tied to a ngFor loop.

now for some context, and my question.

My app uses the steam WebAPI to get a list of all the games a user owns, and stores it in a database.

it then displays the list of these games to the user, with the game logo.

there are some "games" that aren't actually games, dedicated servers mostly. but these non-games don't have any images attached to them. I want to remove these entries from the webpage whenever they crop up. The best way I can think of is to catch any 404 errors and tell the thumbnail to hide itself.

so my question is, is it possible to use ngIf to hide a div if the image url es back with a 404 error?

EDIT

I'm adding the entire thumbnail's code for anyone that might want to look a the bigger picture.

<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./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>

• javascript
• angular

Share Improve this question Follow edited Jul 21, 2017 at 0:16 Jamie McAllister asked Jul 21, 2017 at 0:13 Jamie McAllisterJamie McAllister 72922 gold badges1111 silver badges3535 bronze badges 5

• you can use ng-hide – Josue Martinez Commented Jul 21, 2017 at 0:15
• hiding the div if url is null – Josue Martinez Commented Jul 21, 2017 at 0:16
• could you give me an example? I'm not sure how to do that – Jamie McAllister Commented Jul 21, 2017 at 0:19
• is the div .thumbnail you want to hide if the url returns 404? – Josue Martinez Commented Jul 21, 2017 at 0:22
• yeh, I want to hide .thumbnail div when the url returns 404 – Jamie McAllister Commented Jul 21, 2017 at 0:26

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 14

Using Angular events you can hide the image itself:

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

Or any other element:

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

Or pletely remove any div:

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

When using *ngFor Listen to the (error) event of the image element & if the image is broken you can hide the image itself:

   <div *ngFor="let some of somethings">
       <div *ngIf="some.imageUrl" class="image-class-1 img-class-2">
         <img src="{{some.imageUrl}}" (error)="some.imageUrl = null"/>
       </div>
    </div>

This is what I would do based on what you have said:

1 - I would take the full image url as a property of game.

2 - Also add a property hide to the object.

3 - Consult image using $http service in the controller.

4 - When consulting image the response is 404 then the value of property hide should be true.

5 - As you now have a property hide you can just go ng-hide="game.hide"

Here is an example:

function MyCtrl($scope,$http) {
    $scope.games = [{name: 'Game 1', url: 'https://res.cloudinary./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./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
      }
      });
    });
}