htmlのimgタグのソースとしてjavascript変数を書き込む方法

Question

私は、異なる画像を参照することとは異なる変数を持っています。たとえば、時々私は var imageName = "A.png"を持っています。 divタグのinnerHTMLを"src=" + imageName + ">"に設定したいのですが、動作しません。 innerHTMLの内容を取得するためにalertを使用したとき、私は<img src="A" .png="">を得ました。なぜこうなった？

リクエストごとに、この問題に関する私のHTMLコードがあります。これは、サーブレットからxmlファイルを受け取るコード本体の一部です。私はそれが奇妙なことがわかりますforループの底部ではうまく動作しますが、imgのsrcビットはありません。

EDIT：サーブレットが書いたものを変更することで、innerHTMLをフォーム<img src="/Users/adamsturge991/Desktop/webapp/Ass5/WEB-INF/classes/A.png">に変換することができました（ファイルが見つかるように絶対パスを追加しました）。しかし、まだ画像はロードされていません。

function displayResult(req) 
{ 
    var doc = req.responseText; 
    parser=new DOMParser(); 
    xmlDoc=parser.parseFromString(doc,"text/xml"); 


    var imageName = xmlDoc.getElementsByTagName('ImageName').item(0).textContent + ".png"; 

    var comments = xmlDoc.getElementsByTagName('Comment'); 

    var imgDisplay = document.getElementById('ImageDisplay'); 

    var str = "<img src=" + imageName + ">"; 
    alert(str); 
    imgDisplay.innerHTML = str; 
    alert(imgDisplay.innerHTML); 
    str = ''; 
    for (var j = 0; j < comments.length; j++) 
    { 
     str = str + "<p>"+ comments.item(j).textContent + "</p>"; 
     } 

    var commentDisplay = document.getElementById('CommentDisplay'); 
    commentDisplay.innerHTML = str; 

} 

Answer 1

奇数私はthis exampleが有用であることが判明：

var url = "www.example.com/image.jpg"; 
var img = new Image(); 
img.src = url; 
document.body.appendChild(img); 

あなたはちょうど私は、この行が間違っていると思う、あなたのニーズに

Answer 2

を調整するために、いくつかの微調整を行う必要があります。

var str = "<img src=" + imageName + ">"; 

これは、次のようにレンダリングされます：

<img src=A.png> 

しかし、これは、それはおそらくあるべきbrowset を混乱させる可能性：

var str = "<img src=\"" + imageName + "\" \/>"; 

（つまり、属性値を引用し、あり、そして良い測定のために、タグを閉じます。）

これはとしてレンダリング：

<img src="A.png" />