javascript - 通过javaScript按需将图像插入html

Question

我有一个包含此元素的 html5 文档:

<div id="imgContainer"></div>

文档加载，用户登录，一些新文本被加载并通过 Ajax(使用 jQuery)成功显示。一段时间后(当用户点击时)一个新图像应该被插入到 imgContainer-div 中。

我用这个 jQuery 命令来做到这一点:

$("#imgContainer").html('<img src="newImage.png" alt="">');

文件 newImage.png 与 html 文件和 javaScript 文件位于同一目录中。但它不会出现在浏览器窗口中。但它已正确插入到源代码中。我用我的浏览器 (safari) 的开发者工具检查了这个。此工具不报告任何错误。但图像仍然是不可见的。当我查看资源列表时，我看不到 newImage.png。显然浏览器没有加载它。但是为什么？

当我输入它的 URL 时，图像出现在浏览器窗口中。所以浏览器能够加载它。但是当我修改 html 文档时它不会。为什么？

我必须向 ma javaScript 添加一些额外的代码来告诉浏览器加载图像吗？如果是这样:你能告诉我这个代码吗？

编辑:

在这里尝试:http://jsfiddle.net/YCs66/1/

Answer 1

http://jsfiddle.net/dwebexperts/ZCL2U/1/

替换这个

$("#imgContainer").html('<img scr="https://www.google.com/textinputassistant/tia.png" alt="">');

有了这个

 $("#imgContainer").html('<img src="https://www.google.com/textinputassistant/tia.png" alt="">');

当我查看您的 Fiddle 时，您已将源属性指定为“scr”。