Question

我有一个变量，它可以引用不同的图像。例如，有时候我有 var imageName = "A.png"。我想将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

我发现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>

但这可能会混淆眉毛它可能应该是：

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

（即引用属性值，并且为了更好的衡量标准，请关闭标记。）

这呈现为：

<img src="A.png" />

Answer 3

另一种解决方案可能是使用模板文字：

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

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

3 个答案: