Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

hide img tag if src is empty but without javascript/jQuery or css3

People also ask

How hide image if SRC is empty?

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.

Can img src be empty?

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.

Is img /> An empty tag?

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 img tag 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;
}