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。显然浏览器没有加载它。但为什么呢？

输入网址后，图片会显示在浏览器窗口中。所以浏览器能够加载它。但是当我修改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="">');

当我检查你的小提琴时，你已经将源属性命名为＆＃34; scr＆＃34;。

Answer 2

您的代码存在的问题是.html()方法只放入HTML而不实际解析DOM element的属性。这是解决方案

<强> HTML

<form name="myForm" action="">
<input type="button" value="click me"
onclick="loadPic()">
</form>
<div id="imgContainer"></div>

<强>的Javascript

var loadPic = function () {
    alert("loadPic started");
    $("#imgContainer").html('<img/>');
    $("img").attr("src", "https://www.google.com/textinputassistant/tia.png");
    alert("loadPic finished");
};

PLAYGROUND

注意，正在执行<img/>的{{1}}是.attr("src", ...)功能。结果，在加载实际图像之前会出现2 asynchronous个。

通过javaScript按需将图像插入html

2 个答案: