Display image through html image element object

Question

I have the following code:

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

The createImage function contains a source parameter that contains the image source. After that, I created a pastedImage object of the Image class and after warning that I was getting an html image element object, for example [object HTMLImageElement] .

My question is how can I display an image on my html page using this object. I want to display it after the onload function.

Thanks in advance.

Answer 1

You can also do the following:

  function createImage(source) { var pastedImage = new Image(); pastedImage.onload = function() { document.write('<br><br><br>Your image in canvas: <img src="'+pastedImage.src+'" height="100" width="200"/>'); } pastedImage.src = source; }​ 

Answer 2

Hiya: Working demo http://jsfiddle.net/wXV3u/

Api used = .html http://api.jquery.com/html/

In the demo, click the click me button.

Hope this helps! Please let me know if I missed anything! B -)

the code

 $('#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 3

Follow this link: http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

Answer 4

Simple and better using javascript dom primitive (replaceChild):

Get the parent of the image, div or span that contains it, and replace the old img tag with the new image object created using your function.

  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);