Menu
I have some images on my page.
By default if a given image is not available, then the broken image indicator is shown on Chrome and IE.
I want nothing to be shown but the alternative text in this case. Is there any way to handle it using CSS.
656
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.
Hiding an Image in CSS The trick to hiding any element on your web page is to insert either a " display: none; " or " visibility: hidden; " rule for that element. The " display: none; " rule not only hides the element, but also removes it from the document flow.
You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid. A hidden <img> is not visible, but maintains its position on the page.
using javascript
<img src="broken.png" onerror="this.style.display='none'"/>
edit: added small snipet that will handle all images.
$("img").error(function(){$(this).hide();});
example: http://jsfiddle.net/Va2Wd/
71
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
