Question

尝试将图像添加到innerHTML中。

看了几个关于Q的问题 Why does my image not show up when I use Javascript innerHTML to call it?

Javascripts innerHTML not working for images, but works with text?

我无法让它工作，在Google开发工具中抛出错误：

Uncaught TypeError: Cannot set property 'innerHTML' of null

这一行：

var newImage = document.getElementById('img').innerHTML = "<img src='images/bg-main.png></img>";

我的代码如下：

   function showImage() {
    var img = document.createElement('image');
    //var newImage = document.getElementById('img').innerHTML = "<a href='#'><img src='http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg' border=0/></a>";
    var newImage = document.getElementById('img').innerHTML = "<img src='images/bg-main.png></img>";
    var div5 = document.createElement('div');
    div5.appendChild(newImage);

    return div5.innerHTML;

}

我知道有很多其他方法可以显示图像，但为了本练习的目的，我想将图像作为innerHTML返回

Answer 1

试试这个：

var img = document.createElement("img");
img.setAttribute('src', 'http://www.domain.com/imgSrc');
var div5 = document.createElement('div');
div5.appendChild(newImage);

Answer 2

document.createElement('image')创建一个新的html标记：<image>我怀疑你正在尝试添加div并将图像应用为内部html。您可以修改此代码，如下所示：

function showImage() {
    var img = document.createElement('div');
    document.body.appendChild(img)
    img.innerHTML = "<img src='images/bg-main.png></img>";
}

以HTML格式返回图片

2 个答案: