如何编写一个javascript变量作为html中img标签的源答案

【问题标题】：how to write a javascript variable as source for img tag in html如何编写一个javascript变量作为html中img标签的源
【发布时间】：2012-03-16 02:07:59
【问题描述】：

我有一个变量，它与引用不同的图像交替出现。例如有时我有 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;

}

【问题讨论】：

发布你的代码会很方便
你不想看innerHTML就看src

标签： javascript html

【解决方案1】：

我发现this example 很有用：

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

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

【讨论】：

一次也可以使用document.createElement("img")。
所以把它添加到页面顶部并替换旧的img 我想说这样的话，但是它不起作用。 var img = new Image(); img.src = 图像名称； imgDisplay.removeChild(imgDisplay.firstChild); imgDisplay.appendChild(img);
@AdamSturge——使用 replaceChild, 'imageDisplay.replaceChild(img, imageDisplay.firstChild);

【解决方案2】：

我认为这行是错误的：

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

这将呈现为：

<img src=A.png>

但这可能会混淆浏览器应该是：

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

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

这呈现为：

<img src="A.png" />

【讨论】：

在将其更改为您建议的内容后，内部 HTML 的警报给了我 :(
最后一个\/不需要转义
@Adam Sturge %0A 是一个 url 编码的换行符。我很确定这直接来自您获取图像文件名的方式。我敢打赌，如果您查看 XML 响应，您会发现 <ImageName>\nA\n</ImageName>（其中 \n 实际上是换行符）。如果是这种情况，要么让服务器在没有换行符的情况下返回它（<ImageName>A</ImageName>），要么显式修剪图像名。你也可以试试xmlDoc.getElementsByTagName('ImageName').item(0).nodeValue是否返回一个修剪后的值（而不是.textContent）
@ajax333221 看，脚本中的分号也不是必须的，如果有换行符可以省略。并不意味着这是一个好主意。转义正斜杠对我来说完全一样。它可能不是必需的，但它不会造成伤害并且总是安全的。不逃避正斜杠并不总是安全的，而且可能会造成伤害。见stackoverflow.com/questions/1580647/…。
@RolandBouman 我什至不知道\/ 会避开斜线。你为我节省了数小时的调试时间，以防我需要写"\/"。

【解决方案3】：

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

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

【讨论】：