ng-src and ngFor in Angular

Question

Lets say i take some photo in according to id of something and put it in an array like:

data.attributes.photos = [ "12.jpg", "12_1.jpg", "12_2.jpg" , 12_3.jpg, ... ]

and use it with ngFor like :

<ngb-carousel>
        <ng-template ngbSlide *ngFor="let photo of navbar.infoData.attributes.photos">
            <img class="card-img-top img-fluid w-full" [src]="photo" alt="Okul Fotoğrafı Bulunamadı">
        </ng-template>
    </ngb-carousel>

now there is something called ng-src and on-error in Angular which shows a sample image when there is no any image given in the array.

like this :

 <ngb-carousel>
                            <ng-template ngbSlide *ngFor="let photo of navbar.infoData.attributes.photo">
                                <img class="card-img-top img-fluid w-full" ng-src={{photo}}}  err-SRC="http://google.com/favicon.ico" alt="Okul Fotoğrafı Bulunamadı">
                            </ng-template>
                        </ngb-carousel>

It may work but since i dont know the number of images. is it possible to not show the image if it does not exist in the url of my src?

Answer 1

You can use

<img [src]="someUrl" (error)="updateUrl($event)">

to check if loading someUrl causes an error and then for example update someUrl to load some alternative image instead.

See Angular 2 - Check if image url is valid or broken for an example.