为啥我使用 Javascript innerHTML 调用时我的图像不显示？
Posted
技术标签:
【中文标题】为啥我使用 Javascript innerHTML 调用时我的图像不显示？【英文标题】：Why does my image not show up when I use Javascript innerHTML to call it?为什么我使用 Javascript innerHTML 调用时我的图像不显示？ 【发布时间】：2012-03-20 10:25:44 【问题描述】：我对 javascript 很陌生，我正在尝试一些东西。我正在使用一个函数来使用innerhtml 在表格中加载图像。但是图像不会显示，除非我在函数底部调用 alert("whatever") ，否则它会在警报可见时显示。 我正在使用的代码类似于（从外部 js 文件调用该函数）
<script>
function show()
document.getElementById('imageHolder1').innerHTML="<a href="#"><img='photos/picture.jpg' border=0/></a>";
</script>
<body> <input name="b1" type="button" value="pics" onclick="show()"/>
<table><td id='imageHolder1'>picture</td></table>
</body> ``
我不明白为什么它不起作用，我看过的所有例子都是相似的，我看不出有什么大的区别。即使我尝试不带标签它也不起作用。欢迎任何帮助！在此先感谢您，如果您对如何执行此操作有任何建议（没有 jquery，因为我仍在学习 javascript），我也将不胜感激。再次感谢！
【问题讨论】：
检查#，你需要在你的innerHTML字符串中转义"。innerHTML是一个可以使用的野兽，因为你必须确保你插入的所有内容都是真实和好的HTML。可能想要研究更冗长但更值得信赖的 DOM 操作 javascript，例如appendChild 等。
另外，我建议您使用类似 FF 的 firebug 或其他 JavaScript 调试器，因为这些错误更容易发现。
谢谢，我将尝试 appendChild，并最终查看 Javascript 调试器，因为这个示例似乎无法正常工作。
【参考方案1】：
您的字符串中有错误：
document.getElementById('imageHolder1').innerHTML="<a href="#"><img='photos/picture.jpg' border=0/></a>";
应该阅读
document.getElementById('imageHolder1').innerHTML="<a href='#'><img src='photos/picture.jpg' border=0/></a>";
(注意"要'替换)
【讨论】：
这一定是一个糟糕的剪切粘贴，否则会产生一个语法错误 是的，我在粘贴时删除了src【参考方案2】：您的代码中有很多错误和懒惰的快捷方式。我做了一个小提琴，不得不纠正很多看起来很仓促的地方......这是你的小提琴，但要投入一些精力：http://jsfiddle.net/uXpeK/
【讨论】：
非常感谢您抽出宝贵时间来做这件事！我想这与放入重要属性有关。【参考方案3】：您没有添加图像 src。应该是href='#'应该是这样的
function show()
document.getElementById('imageHolder1').innerHTML="<a href='#'><img src='photos/picture.jpg' border='0'/></a>";
【讨论】：
【参考方案4】：尝试给图像一个 'image' 的 id，然后使用以下内容：
function show()
document.getElementById('image').src = 'photos/picture.jpg'
【讨论】：
以上是关于为啥我使用 Javascript innerHTML 调用时我的图像不显示？的主要内容，如果未能解决你的问题，请参考以下文章
document.getElementById("test").value 和 document.getElementById("test").innerHTM