javascript - jQuery 的 load() 不显示图像

Question

大家晚上好

我正在使用 JavaScript 将 HTML 文件中的内容加载/覆盖到指定的 div 中。
您可以watch a demo .

执行加载作业的 JavaScript 如下所示:

function loadScreenie(elementSelector, sourceURL) {
    $(""+elementSelector+"").load("img/screenies/"+sourceURL+"");
}

并由如下所示的超链接调用:

<a href="javascript:loadScreenie('#iphone-screen', 'screenie2.htm');">mibmib</a>

(我也尝试过使用 onclick=""进行相同的操作)

这是screenie2.htm的内容

hello world<br />
<img src="screenie2.png" />

问题是图像未显示。行为如下:
- 单击链接，JavaScript 就会被执行。
- screenie2.htm中的文本在正确的div中正确显示
- 图像未显示。也没有任何损坏的图像符号或空白区域。

您知道什么可能导致此错误吗？

提前非常感谢，
——本尼

Answer 1

好的。让我向您总结一下这里发生的事情。

1. 单击链接时，jQuery 会加载“img/screenies/screenie2.htm
2. 图像标签 <img src="screenie2.png" />被插入到 DOM 中。

因此，我们有一个图像链接到 ./screenie2.png 处的假定图像，您会认为它应该链接到 *./**img/screenies/**screenie2。 .png*。

您需要在 load() 中使用绝对 URL :编辑内容。