写真を表示していますか？

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です。

あなたは2つのオプションがあります。

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 
} 

取得：代わりに、それはHTMLの文字列だふりの（appendChildである）適切なDOM関数を使用して#photo要素に

1. 追加joe_fatを代わりにImageオブジェクトを削除し、実際には代わりにHTML文字列を表示してください：

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

Answer 2

代わりinnerHTMLの使用appendChild()：

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

innerHTML経由でこれを行うには（好ましい方法ではないです）、あなたは#photoのinnerHTMLプロパティを設定する必要があります実際の<img>マークアップになる：

document.getElementById('photo').innerHTML = "<img src='pic1.jpg' alt='alttext' />"; 

これは、#photoの既存の内容をすべて上書きします。正しい方法は、appendChild()を使用してDOMを操作することです。

Answer 3

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