CODEWITHSUNDEEP
angularionic4
Ali Ghassan
Ali Ghassan

Reputation: 1180

how to check if images from url is broken

l am working on ionic 4 project . My project is getting data json from url . l want to check if images comes from url is broken or not . if is broken show another images . l am tried different code but no one is working .

what l am using code is 

   <ion-row *ngFor="let item of items" justify-content-around test-center>


          <ion-col >
              <img src="/images/data/operators/{{item.flight.airline.code.icao}}_logo0.png"  onerror="this.src='images/data/operators/{{item.flight.airline.code.iata}}_{{item.flight.airline.code.icao}}.png'">

          </ion-col>


        </ion-row>

l got error when to run 

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Binding to event property 'onerror' is disallowed for security reasons, please use (error)=...
If 'onerror' is a directive input, make sure the directive is imported by the current module.

depending on error if l use (error)= l got another error is 

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 69 in [this.src=

any solution please ?

Upvotes: 4

Views: 2537

Answers (2)

Muhammad Abdullah
Muhammad Abdullah

Reputation: 482

you should try this. If image not found it will load an alternative image 

 <img   class="img-style"  [src]="user.photo ? user.photo : 'https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg'">

Upvotes: 2

Shubham Chaudhary
Shubham Chaudhary

Reputation: 499

(error) catches error event triggered by img. Use something like:

<img src="..." (error)="handleImgError($event, item)">

In your component create function handleImgError()

function handleImgError(ev: any, item : any){
   let source = ev.srcElement;
   let imgSrc = `images/data/operators/${item.flight.airline.code.iata}_${item.flight.airline.code.icao}.png`;

   source.src = imgSrc;

}

Upvotes: 5

Related Questions