How to remove whitespace when working with empty img src in html-CodePudding

I have two image tags, one for the left side and one for the right side. The image on the left will always be populated, but the image on the right may or may not be populated. In the case it is not populated, the image src will be empty (i.e. img src = ""). However, this creates a whitespace where the image should be. How can I go around removing this? I've tried to use alt = "" and I've also tried to set height and width, etc. to 0, but the whitespace is always there (just smaller).

Not sure if I can directly remove this in the HTML or if I have to code this in (using Groovy/Java).

CodePudding user response：

respectfully you can give it a display of none in case src attribute is empty using javascript.
also you can do it with pure css like:

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

CodePudding user response：

you can simply make it display none using CSS if the Image src is empty. Just place the below code in your Stylesheet "CSS file"

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

the above css will apply on all images, if you need to make it specific like only the image in spacific div just add class before that see below.

.class_name img[src=""], img[src="#"] { display:none;}