Ionic: How Can i show default image in case of image source error?

user_7708344 0
Viewed 285

I have a case that, I want to show default image in case of image source error.

My souce code is here,

<ion-img [src]="assets/imgs/avatar7.png" (ionError)="this.src=assets/imgs/avatar7.png" ></ion-img>

this throwing error as 

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'png' of undefined

enter image description here

Any help will be appreciable.

ionic4 image-processing
1 Answers

In my experience it wont happen that way,

I would suggest you doing it this way:

add and ngIf directive for your ion-img

<div *ngIf="!assets/imgs/avatar7.png">
<ion-img [src]="path to error image"  ></ion-img>
</div> 

<div *ngIf="assets/imgs/avatar7.png">
<ion-img [src]="path to image"  ></ion-img>
</div>

You evaluate either if the image path exist or not. And show the respective image you want.

user_113420350
Related