ion-img onerror

[pickfire]

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request

Add support for ion-img to handle error during lazy loading. Currently only img supports onerror but ion-img does not.

onerror is useful when we want to fallback to a default image. Such as:

<ion-img [src]="image.src" (error)="this.src = 'assets/img/error.svg'"></ion-img>

Describe Preferred Solution

onerror support.

Describe Alternatives

Use img but there is no lazy loading and a lot slower.

Related Code

Additional Context

[touch2hussain]

any update on this feature request? it must have feature when images are dynamically loaded and not sure they exist

[pickfire]

I wonder if there are any updates as well, it seems like it is merged from the pull request but I am not sure what happened and it is not included in the release as well.

[SamVerschueren]

It's not yet merged but is really blocking us.

[vitgije]

@SamVerschueren I have written a quick and dirty workaround to hook into the original 'onerror' event of the img within the shadow-root using the already available ionImgDidLoad event as I ran into the same issue. I have no idea whether this works on a device, but perhaps it could help you. I do agree with the original request where we can register an event upon the ion-img tag though.

In *.page.html:

<ion-img [src]="product.image !== '' ? product.image : ''" alt="" class="image-loading" (ionImgDidLoad)="imageLoaded($event)"></ion-img>

in *.page.ts:

imageLoaded(event) {
  // Register the onerror event on the image in case of a 404
  let img = event.srcElement.shadowRoot.children[1];
  img.onerror = () => { img.src = '/assets/no-media.png'; };
  event.srcElement.className = event.srcElement.className.replace('image-loading', '');
}

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.