Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ion-img onerror #16947

Closed
pickfire opened this issue Jan 3, 2019 · 5 comments

Comments

5 participants
@pickfire
Copy link
Contributor

commented Jan 3, 2019

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

@ionitron-bot ionitron-bot bot added the triage label Jan 3, 2019

pickfire added a commit to pickfire/ionic that referenced this issue Jan 16, 2019

@touch2hussain

This comment has been minimized.

Copy link

commented Mar 6, 2019

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

@pickfire

This comment has been minimized.

Copy link
Contributor Author

commented Mar 7, 2019

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

This comment has been minimized.

Copy link

commented Mar 20, 2019

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

@vitgije

This comment has been minimized.

Copy link

commented Mar 21, 2019

@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', '');
}

@liamdebeasi liamdebeasi added this to Backlog 🤖 in Ionic Core via automation Mar 26, 2019

@liamdebeasi liamdebeasi moved this from Backlog 🤖 to Needs review 🤔 in Ionic Core Mar 26, 2019

Ionic Core automation moved this from Needs review 🤔 to Done 🎉 Mar 27, 2019

liamdebeasi added a commit that referenced this issue Mar 27, 2019

@ionitron-bot

This comment has been minimized.

Copy link

commented Apr 26, 2019

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Apr 26, 2019

Kiku-git added a commit to Kiku-git/ionic that referenced this issue May 16, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.