显示照片？

Question

我试图在警报框中这样做才发现我现在不能。我根本无法让它显示出来。而不是变量我得到[object HTMLImageElement]。我错过了什么，但它是什么？

function joePic(){
    var joe_fat = new Image;
    joe_fat.src = "pic1.jpg";
    document.getElementById('photo').innerHTML = joe_fat;
}

<input type="button" value="Click here it find out" name="joePhoto" onclick="joePic()" 
height="150" width="150" />

Answer 1

好吧，您正在尝试将Image指定为HTML，但它不是HTML。这是一个Image。

您有两种选择：

1. 使用正确的DOM函数（joe_fat）将#photo附加到appendChild元素中，而不是假装它是一串HTML：

   function joePic() {
       var joe_fat = new Image;
       joe_fat.src = "pic1.jpg";
   
       var photoElm = document.getElementById('photo');
       photoElm.innerHTML = '';        // clear target first
       photoElm.appendChild(joe_fat);  // now add image
   }
   

2. 摆脱Image对象并实际呈现一串HTML：

   function joePic() {
      document.getElementById('photo').innerHTML = '<img src="pic1.jpg" />";
   }
   

Answer 2

使用appendChild()代替innerHTML：

function joePic(){
  var joe_fat = new Image;
  joe_fat.src = "pic1.jpg";
  document.getElementById('photo').appendChild(joe_fat);
}

要通过innerHTML（这不是首选方法）执行此操作，您需要将#photo的{​​{1}}属性设置为实际innerHTML标记，如：

<img>

这将覆盖document.getElementById('photo').innerHTML = "<img src='pic1.jpg' alt='alttext' />"; 的任何现有内容。正确的方法是使用#photo来操纵DOM。

Answer 3

function joePic() {
    var joe_fat = new Image();
    joe_fat.src = "pic1.jpg";
    document.getElementById('photo').appendChild(joe_fat);
}