CODEWITHSUNDEEP
angularerror-handlingevent-handlingionic4angular7
Gabriel Guedes
Gabriel Guedes

Reputation: 491

Error events for failed load images in ionic tags

I have this ion-img tag

<ion-avatar [ngClass]="cssClass">
  <ion-img
  [src]="avatar"
  (ionError)="failedImageLoad($event)"></ion-img>
</ion-avatar>

And i need to send an error event when the image failed to load, this (ionError) event is in the documentation of the ion-img tag, but it doenst work, and the other events handler are working fine, someone knows any other event handler for error ?

Upvotes: 2

Views: 4878

Answers (3)

rohit mali
rohit mali

Reputation: 39

Simple solution.

ionError : solution

fallbackUrl = 'assets/img/fallback-image.png';
<ion-img  [src]="user.userMg" (ionError)="user.userMg = fallbackUrl"></ion-img>

Upvotes: 0

Tendai kastande
Tendai kastande

Reputation: 41

My solution for image load error

<img class="avatar" [src]="merchant.logo_url" (error)="errorImage(img)" #img />



  errorImage(img) {
    
    img.src = '../../../../../../assets/svg-icons/022-menu.svg'
  }

Upvotes: 2

rtpHarry
rtpHarry

Reputation: 13125

Seems you have something else going on as it's working for me:

<ion-img src="notfound.png" (ionError)="onError()"></ion-img>

With this handler in the codebehind:

  onError() {
    console.log("IMG ERROR");
  }

And this output:

enter image description here

Are you sure you have got the correct name for your error handler function?

failedImageLoad()

update

Based on your comment you are dealing with a 403 error.

I looked at the code and the ionError is really just a wrapper for the html img onerror event.

This is defined on mdn:

  • The src attribute is empty or null.
  • The specified src URL is the same as the URL of the page the user is currently on.
  • The specified image is corrupted in some way that prevents it from being loaded.
  • The specified image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the element's attributes.
  • The specified image is in a format not supported by the user agent.

So it seems that it should trigger the error.

Just to be sure: you mention two separate files this time, which wasn't in your original question. Have you put the image handler in both of them?

Upvotes: 0

Related Questions