CODEWITHSUNDEEP
javascriptjqueryimage
Fenrir
Fenrir

Reputation: 373

javascript Image tag

I'm adding an image snapshot of a webcam to a div using jquery (2.1.3)

Why does this not work:

var image = new Image();
image.src = "data:image/jpg;base64," + data;
image.width = "320px";
image.height = "240px";
$("#video").html(image);

The image tag has sizes 0 for w and h;

This does work

var image = $("<img>", {
    "src": "data:image/jpg;base64," + data,
    "width": "640px", "height": "480px"});
$("#video").html(image);

Upvotes: 1

Views: 4726

Answers (1)

Rhumborl
Rhumborl

Reputation: 16609

The issue is that a pure HTML Image element takes numbers as its width and height, not dimensions, so remove the "px":

var image = new Image();
image.src = "https://www.google.co.uk/images/srpr/logo11w.png";
image.width = "320";
image.height = "240";
$("#video").html(image);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="video"></div>

JQuery is smarter and converts the width and height properties to set style="width:320px; height:240px", i.e. using css, which is preferred as width and height attributes are deprecated.

Upvotes: 2

Related Questions