javascript 图像标签

Question

我正在使用 jquery (2.1.3) 将网络摄像头的图像快照添加到 div

为什么这不起作用:

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

图像标签的 w 和 h 尺寸为 0；

这确实有效

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

Answer 1

问题是纯 HTML Image 元素将数字作为其 width 和 height，而不是尺寸，因此删除“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 更智能，它会转换 width 和 height 属性来设置 style="width:320px; height:240px"，即使用css，这是首选的，因为 width 和 height 属性已被弃用。