I was working on a project, where we get a lot of data from a remote system we do not control. We were displaying this data, which included an image. Most of the time the image data was valid, but every once in a while we got a broken image reference. We didn't want to show the default browser broken image link, like this:
So, we needed another way.
The answer was to use an error handler on the image and replace it. Consider something like this:
If the image fails to load, the error handler is executed inside the component class:
2 event.target.src = 'images/NotFound.png';
3 event.target.onerror = null
4 }
And from there we can just replace the image source to our not found placeholder.
I found a placeholder image from Pixabay for this blog post:
posted by Jeffry Houser in
Professional, Angular
| 0 Comments
