Menu
HTML allows to use the onerror event on images to hide them when the src URL returns a 404, or when it's undefined or null . In React, you can use the onError event to prevent 404 errors.
Use the getAttribute() method to check if an image src is empty, e.g. img. getAttribute('src') . If the src attribute does not exist, the method returns either null or empty string, depending on the browser's implementation.
The img element is an empty element. It starts with <img> tag and does not have any end tag. 3. The value of the src element of img element holds the URI representing the location of the image.
You can use [attr=val] selector
img[src=""] {
display: none;
}
The above selector will simply match, if the src attribute has no value. This selector is a general one and will match all the img tag in the document with an empty src, if you want to target specific ones, than use more specific selector like
.class_name img[src=""] {
display: none;
}
Demo
Demo (Without the above selector, see that red line?)
Alternatively, if you want to reserve the space taken by img tag, you might like to use visibility: hidden; instead of display: none; as display: none; will simply mess your layout where visibility: hidden; will reserve the space, it will just hide the img
See the difference between display: none; and visibility: hidden;
Demo (visibility: hidden;, reserves space)
Demo 2 (display: none;, won't reserve space)
Note: None of the above selectors will REMOVE the
imgtag from the DOM, it will simply hide it from the front end
[attr=value] selector is CSS2, you should be ok.
img[src=""] {
display:none;
}
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