Loading "error" event does not fire

[bnfrnz]

The (load) event seems to always fire -- even if the URL is faulty/null -- and the (error) event seems to never fire. Is that intended this way?

I have a use case in which it's important to know if the image has loaded correctly. I'm loading an avatar and if it fails, I display a different DOM element with the user's name initial:

<img-loader useImg [hidden]="!loaded" [src]="..." (load)="loaded=true" (error)="loaded=false; loadError=true"></img-loader> <div [hidden]="loaded && !loadError">{{ user.name | slice:0:1 }}</div>

I cannot get this to work as the (load) event seems to always fire and the (error) event seems to never fire. Am I doing something wrong?

[bnfrnz]

I just found a way to determine a loading error by specifying a fallback URL and then checking as follows:

onLoad(imgLoader: ImgLoader) {
  this.loaded = imgLoader.element.attributes['src'].value !== fallbackUrl;
}

However, this isn't very elegant. May I suggest to have the <img-loader> pass on its <img> element's (load) event binding?

[lincolnthree]

This workaround isn't doing it for me. The src attribute isn't consistently updated when it is checked in the event handler. Exposing the (error) event is definitely the correct solution.

[zvihersh]

+1

i tried to add the (error) event by the [imgAttributes] attribure like this: [imgAttributes]="[{element: (error), value: onError()}]" but it didn't worked correctly