如何编写javascript变量作为html中img标记的源代码

Question

我有一个变量，可以从引用不同的图像中选择。例如，有时我CCD_ 1。我想将div标记的innerHTML设置为"src=" + imageName + ">"，但它不起作用。当我使用alert来获取innerHTML的实际内容时，我得到了这个<img src="A" .png="">。为什么会发生这种情况？

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

编辑：通过更改servlet的内容，我成功地将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

我发现这个例子很有用：

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>

但这可能会让浏览者感到困惑可能应该是：

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

（也就是说，引用属性值，为了更好地衡量，关闭标签。）

这渲染为：

<img src="A.png" />

Answer 3

另一个解决方案可以是使用模板文字：

var str = `<img src="${imageName}">`;