How do I change the source of an image if an error occurs?

Question

Why does the following statement throw an error?

Idea: To show an image from the normal URL. If it\'s not found (404), show a fallback image.

<

Answer 1

Try this:

if(typeof(src)==="undefined")
{
$("#imageID").attr("src","yourNewSource_goes_here");
}

If that doesn't work, you can try this:

if(document.getElementById("myImg").complete==false)
{
$("#myImg").attr("src","another_source_goes_here");
}

Answer 2

You should implement this logic in the component, not in the template.

Then change your template like so:

<img [src]='image_path + item.leafname' (error) ="changeSource($event, item.leafname)">

Then create an error handler, like so:

changeSource(event, name) { event.target.src = this.fallback_path + name; }

Which updates the image source to your fallback source.