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

Question

我有以下代码：

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

该函数createImage包含包含图像来源的源参数。之后，我创建了pastedImage类的对象，Image并提醒我正在获取 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('<br><br><br>Your image in canvas: <img src="'+pastedImage.src+'" height="100" width="200"/>');                      

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

Answer 4

文档。创建范围（）。createContextualFragment (img.outerHTML)

例子

const img = new Image()
img.src = "https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico"
const frag = document.createRange().createContextualFragment(`${img.outerHTML}`)
document.querySelector(`body`).append(frag)