Menu
I have my image inside an if statement:
if (item.image)
historyHtml += '<a href=' + item.image + ' class="image" target="_blank"><img src="' + item.image +'" width="111px"/></a>';
383
Example to hide the 'Image Not Found' icon i.e. Using jQuery: Using the JQuery error handler function error(), we can catch the error and hide the object using hide() function. Note: The error() function has been removed from jquery version 3.0. and later.
You can't style the way that the broken images look but you can use pseudo-elements to create new elements that override the broken image styling with your own. This is done by using :after to create a new element that sits on top of the broken image so we can style it however we want.
An image could be broken for any number of reasons. For example, the image might not exist, it might not be named properly, or the file path in the code might be incorrect. In this article we'll go over more advanced file system concepts, including absolute and relative file paths.
You can use the onerror handler. In the inline form, it looks like this:
<img src="someimage.jpg" onerror="this.style.display='none';" />
As @piskvor says, actually loading the image in an img tag is the only way of finding out whether the URL is broken or not. The error event gets fired if loading fails.
But looking at your code, maybe the opposite approach makes most sense: Hide the <a> by default, and show it in the onload event of the image.
Abridged:
<a href=".." id="image228" style="display: none">
<img src="..." onload="this.parentNode.style.display = 'block'">
</a>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
