javascript 如何在html中编写一个javascript变量作为img标签的源
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9730895/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to write a javascript variable as source for img tag in html
提问by Adam Sturge
I have a variable that alternates from referencing different images. For example sometimes I have
var imageName = "A.png". I want to set the innerHTML of a div tag to "src=" + imageName + ">"but it doesn't work. When I used alert to get what the innerHTML actually was, I got this <img src="A" .png="">. Why is this happening?
我有一个变量，它可以替代引用不同的图像。例如，有时我有
var imageName = "A.png". 我想将 div 标签的 innerHTML 设置为，"src=" + imageName + ">"但它不起作用。当我使用 alert 来获取 innerHTML 的实际内容时，我得到了这个<img src="A" .png="">. 为什么会这样？
As per request here is my HTML code pertaining to this problem. It's part of a larger body of code which receives an xml file from a servlet. I find it weird that the for loop at the bottom works fine but the img src bit doesn't.
根据请求，这里是我与此问题有关的 HTML 代码。它是从 servlet 接收 xml 文件的较大代码体的一部分。我觉得奇怪的是底部的 for 循环工作正常但 img src 位没有。
EDIT: I managed to get the innerHTML into the form <img src="/Users/adamsturge991/Desktop/webapp/Ass5/WEB-INF/classes/A.png">by changing what the servlet wrote (I added the absolute path just to be sure that the file could be found.) However the picture still isn't loading. Odd
编辑：我设法<img src="/Users/adamsturge991/Desktop/webapp/Ass5/WEB-INF/classes/A.png">通过更改 servlet 写入的内容将 innerHTML 放入表单中（我添加了绝对路径只是为了确保可以找到该文件。）但是图片仍然没有加载。奇怪的
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;
}
回答by ajax333221
I found this exampleuseful:
我发现这个例子很有用：
var url = "www.example.com/image.jpg";
var img = new Image();
img.src = url;
document.body.appendChild(img);
You just need to make some tweaks to adjust to your needs
您只需要进行一些调整以适应您的需求
回答by Roland Bouman
I think this line is wrong:
我认为这一行是错误的：
var str = "<img src=" + imageName + ">";
This will render as:
这将呈现为：
<img src=A.png>
But this could confuse the browset It probably should be:
但这可能会混淆浏览器它可能应该是：
var str = "<img src=\"" + imageName + "\" \/>";
(that is, quote the attribute value, and for good measure, close the tag.)
（也就是说，引用属性值，为了更好的衡量，关闭标签。）
This renders as:
这呈现为：
<img src="A.png" />
