为什么我使用JavaScript innerHTML调用图片时，图片无法显示？

Question

为什么我使用JavaScript innerHTML调用图片时，图片无法显示？

6

我对Javascript很陌生，最近在尝试一些东西。我使用一个函数通过innerHTML在表格中加载图片。但是图片不会显示，除非在函数底部调用alert("whatever"), 然后在alert可见时它就会显示出来。我使用的代码类似于以下内容（该函数从外部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），我也将不胜感激。再次感谢！

- user1243747

请检查 #，您需要在 innerHTML 字符串中转义 "。innerHTML 是一个难以处理的东西，因为您必须确保插入的所有内容都是真实且良好的 HTML。您可能需要研究更冗长但更可靠的 DOM 操作 JavaScript，例如 appendChild 等。 - user17753

此外，我建议您使用类似于火狐浏览器的Firebug或其他JavaScript调试器进行工作，因为这些错误更容易被发现。 - user17753

谢谢，我会尝试使用appendChild，并且一定会查看JavaScript调试器，因为当前的示例似乎无法正常工作。 - user1243747

4个回答

2

您的代码中有很多错误和懒惰的捷径。我制作了一个 fiddle 并且不得不纠正了很多看起来非常匆忙的地方...这是您的 fiddle，但请认真对待它：http://jsfiddle.net/uXpeK/

- mindandmedia

非常感谢您抽出时间来完成这个任务！我猜这可能与输入重要属性有关。 - user1243747

1

你没有添加图片的src。应该是href='#'像这样

function show(){
     document.getElementById('imageHolder1').innerHTML="<a href='#'><img src='photos/picture.jpg' border='0'/></a>";
}

- clem

1

试着给图片设置一个id属性为'image'，然后使用以下代码：

function show(){
    document.getElementById('image').src = 'photos/picture.jpg'
}

- Jack

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- St.Woland · Accepted Answer

您的字符串存在错误：

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>";

(注意 " 转换为 ')