如何在html中編寫一個javascript變量作爲img標記的源代碼

我有一個變量可以引用不同的圖像。例如有時我有 var imageName = "A.png"。我想將div標記的innerHTML設置爲"src=" + imageName + ">"，但它不起作用。當我使用alert來獲取innerHTML的實際內容時，我得到了這個<img src="A" .png="">。這是爲什麼發生？如何在html中編寫一個javascript變量作爲img標記的源代碼

根據要求，這裏是我的HTML代碼有關這個問題。它是從一個servlet接收一個xml文件的大部分代碼的一部分。我覺得很奇怪，底部的for循環工作正常，但img src位沒有。

編輯：我設法通過改變什麼servlet寫入（我添加了絕對路徑只是爲了確保該文件可以找到），以獲得形式<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; 

}

來源

2012-03-16 Adam Sturge

發佈您的代碼會派上用場 – ajax333221 2012-03-16 02:09:29

顯示**實際**代碼。 – RobG 2012-03-16 02:09:54

你不想看'innerHTML'只是'src' – dldnh 2012-03-16 02:11:30

我發現this example有用：

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

你只需要進行一些調整，以適應您的需求

來源

2012-03-16 02:11:19 ajax333221

一次也可以使用'document.createElement（「img」）'。 – 2012-03-16 02:26:44

所以將它添加到頁面的頂部並替換舊的img我想說這樣的事情，但它不起作用。 var img = new Image（）; img.src = imageName; imgDisplay.removeChild（imgDisplay.firstChild）; imgDisplay.appendChild（img）; – 2012-03-16 02:34:33

@ AdamSturge-use * replaceChild *，'imageDisplay.replaceChild（img，imageDisplay.firstChild）; – RobG 2012-03-16 02:39:57

我覺得這條線是錯誤的：

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

這將呈現爲：

<img src=A.png>

但這可能混淆browset 它可能應該是：

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

（即報價的屬性值，並有很好的措施，關閉標籤。）

這使得作爲：

<img src="A.png" />

來源

2012-03-16 02:20:05

更改爲您建議的內部HTML警報給我 :( – 2012-03-16 02:31:14

最後一個''''''''''不需要被屏蔽 – ajax333221 2012-03-16 02:41:43

@Adam Sturge'％0A'是一個url編碼換行符。我敢打賭，如果你看看XML響應，你會發現' \ nA \ n'（其中'\ n'實際上是換行符）。如果是這樣的話，可以讓服務器返回它，而不用換行符（' A'）或顯式修改圖像名稱，也可以嘗試'xmlDoc.getElementsByTagName（'ImageName'）。item（0）.nodeValue'給出返回修剪後的值（而不是'.textContent'） – 2012-03-16 03:05:48

如何在html中編寫一個javascript變量作爲img標記的源代碼

回答

相關問題