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

Question

I am designing templates in Channel Advisor for eBay store and it doesn't allow javascript/jQuery. Also, the CSS3 doesn't work in various IE versions specially the img[src=] implementation is broken.

When I use template tags in img like:

<img src="{{THUMB(ITEMIMAGEURL1)}}"/> 

where {{THUMB(ITEMIMAGEURL1)}} is the image path, if the image is missing and the template is posted to eBay then the end result would be like this:

<img src=""/> 

and this shows a broken image.

Is there a way to hide <img src=""/> with HTML or CSS that works in IE7+

Answer 1

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

Answer 2

[attr=value] selector is CSS2, you should be ok.

img[src=""] {
  display:none;
}

Answer 3

If src attribute is missing altogether:

img:not([src]), img[type='src'], img[type='src'] {
display:none !important;
}

Reference