IMG has 0x0 pixels when src added with jQuery

Riiwo Published at Dev

Riiwo

I was making custom modal popup(#light1). In my JavaScript I take src from the image I clicked on and add it to img tag with id addable.

jQuery

var images=$('#raam img'), index=0
$(images).click(function() {
    var src= $(images.eq(index)).attr('src');
    $("#addable").attr('src', src)
    $('#light1').css("display","block")
});

And HTML

<div id="raam">                
    <img id="pilt1" src="uudistepildid/1.jpg" alt="1">
    <div id="light1" class="wcontent">
        <img id="addable">
    </div>
</div>

and CSS

#addable { 
    width: 600px;
    height: 600px; //even forcing doesn't help
}

This all works fine. When I inspect it shows me the right src and sytle with width and height, but it has size 0x0 and I can't change it. It even tells me its natural size. I leave snapshot with the problem.

This is what inspector shows:

This is what it looks like( I took out some unnessesay code, just to make it faster to read);

VVV

Your image uses the styles you applied to #raam img which sets the image to visibility:hidden. When you do display:block to show it, it's there physically (I mean you can access it's properties but it's not visible). In order to have it show on screen, you need to set it's visibility to visible.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-7

Comments

0 comments

From Dev

Related Related

Article