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

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

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)