javascript - 如何编写 javascript 变量作为 html 中 img 标签的源

Question

我有一个变量，它交替引用不同的图像。例如有时我有 var imageName = "A.png" 。我想将div标签的innerHTML设置为"src=" + imageName + ">"但它不起作用。当我使用alert来获取innerHTML实际是什么时，我得到了这个<img src="A" .png=""> 。为什么会发生这种情况？

根据请求，这里是我与此问题相关的 HTML 代码。它是从 servlet 接收 xml 文件的较大代码体的一部分。我觉得很奇怪，底部的 for 循环工作正常，但 img src 位却不行。

编辑:我设法将innerHTML放入表单<img src="/Users/adamsturge991/Desktop/webapp/Ass5/WEB-INF/classes/A.png">中通过更改 servlet 写入的内容(我添加了绝对路径只是为了确保可以找到该文件。)但是图片仍然无法加载。奇数

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);

您只需要进行一些调整即可适应您的需求