通过html图像元素对象显示图像

我有以下代码：

function createImage(source) { var pastedImage = new Image(); pastedImage.onload = function() { } pastedImage.src = source; } 

函数createImage包含包含图像源的source参数。 之后我创建了类Image的对象pastedImage，并在警告我获得了像[object HTMLImageElement]类的html图像元素[object HTMLImageElement] 。

我的问题是如何使用该对象将图像显示到我的html页面。 我想在onload函数后显示它。

提前致谢。

Answer 1

Hiya： 工作演示 http://jsfiddle.net/wXV3u/

使用的Api = .html http://api.jquery.com/html/

在演示中单击“ click me按钮。

希望这可以帮助！ 如果我遗漏了什么，请知道！ B-）

码

 $('#foo').click(function() { createImage("http://images.wikia.com/maditsmadfunny/images/5/54/Hulk-from-the-movie.jpg"); }); function createImage(source) { var pastedImage = new Image(); pastedImage.onload = function() { } pastedImage.src = source; $(".testimonialhulk").html(pastedImage); }​ 

Answer 2

你也可以这样做：

  function createImage(source) { var pastedImage = new Image(); pastedImage.onload = function() { document.write('


Your image in canvas: '); } pastedImage.src = source; }​ 

Answer 3

简单，更好，使用javascript dom原语（replaceChild）：

获取图像的父级，包含它的div或span，并将旧的img标记替换为使用函数创建的新图像对象

  var domImgObj = document.getElementById("image"); var imgObj = createImage(src); // your function imgObj.id = pageimgObj.id; // necessary for future swap-outs document.getElementById("container").replaceChild(imgObj,domImgObj);