IMG width cannot be set when src is blank?

Question

I'm having a problem where my second image is appearing in the place where my first image should be appearing which causes a flickering effect (from positioning) when the first image actually exists. I thought this would be super simple so I'd love an education on this.

My HTML

<img id="image1" src="" width="32"/>
<img id="image2" src="" width="32"/>

My JQuery

$(function(){
    //$('#image1').attr('src','http://www.w3schools.com/html/smiley.gif');
    $('#image2').attr('src','http://www.w3schools.com/html/smiley.gif');
});

I tried encapsulating the images in fixed width divs (like so) as well to no avail, the div's widths to not stay fixed either.

<div style="width: 32px; display: inline;"><img id="image1" src="" width="32"/></div>
<div style="width: 32px; display: inline;"><img id="image2" src="" width="32"/></div>

score 0 · Answer 1 · answered Jan 24 '12 at 22:46

I'm not sure if your first bit of html would work... regardless, with no height set, I'm not sure if the space is set aside in the rendering of the screen.

You may want to set up a class for how each image should be displayed.

.holder {
     min-width:32px;
     min-height:32px;
     position:relative;
}

the html

 <img id="image1" class="holder" src=""/>
 <img id="image2" class="holder" src=""/>

the JQuery

$(function(){
    //$('#image1').attr('src','http://www.w3schools.com/html/smiley.gif');
    $('#image2').attr('src','http://www.w3schools.com/html/smiley.gif');
});

score 0 · Answer 2 · answered Jan 25 '12 at 00:19

0

I'm not sure but you can try change display value on div's style to inline-block

answered Jan 25 '12 at 00:19

Mahfud Harun

915
1
13
19

This works, thank you. If anyone has the time though I'd like to know why this wouldn't work the way I had it. I'll wait to mark this as the correct answer since that answer may come along but in-case anyone from the future reads this: this did achieve my goal. – LightningSorc Jan 25 '12 at 00:25
Here's some more info on inline vs. block elements, which be helpful for you: http://stackoverflow.com/questions/1423294/setting-the-width-of-inline-elements – Pamela Jan 25 '12 at 01:43

score 0 · Accepted Answer · answered Jan 25 '12 at 00:24

The src is not "blank" it is a relative URI that resolves to the URI of the current document, since that is an HTML document, it is not an image so an error will be thrown.

Depending on the browser, it may or may not generate a box of the size you specify for an invalid image.

The solution is to not insert images into the DOM (via HTML or JS) that don't have src attributes containing the URI of an actual image.

I tried encapsulating the images in fixed width divs (like so) as well to no avail, the div's widths to not stay fixed either.

You have explicitly set the div elements to display: inline. The width property does not apply to inline elements.

Thank you, this makes sense. Ultimately I changed my code to include divs with a style of inline-block. — LightningSorc, Jan 25 '12 at 19:20

IMG width cannot be set when src is blank?

3 Answers3