jQuery加载和相对路径

Question

我正在使用jQuery加载页面内容，如下所示：

$("#content").load(path);

内容文件纯粹是这样的内容：

<!--page.php-->
I am content

但是，当我想在我的内容中包含图像时：

<!--page.php-->
<img src="images/image.jpg"/>

该路径仅相对于jQuery脚本的原点而不是page.php文件起作用，因此以下示例不适用于上述代码：

Directory tree:

index.php
jQuery.js
pages/
  page.php
  images/
    image.jpg

因为它正在使page.php相对于jQuery所在的位置，所以它无法找到images文件夹，除非我给它一个确切的路径，在我的实际站点中所有时间都会根据内容文件位于。

是否有一种非黑客的方法，不涉及我在我想要引用的每个图像或内容中放置确切的路径？

Answer 1

我知道你说非hacky但你可以在加载内容

后执行此操作

$("#content").load(path + '/page.php');

然后

$('#content img').each(function(){
    $(this).prop('src', path + '/' + $(this).prop('src'))
})

Answer 2

您可以为图像目录的路径设置一个全局变量。 并将该变量用于路径，无论您将图像放在哪里。

如果路径发生变化，则只需更改一个变量值。

Answer 3

使用 attr（'src'）而不是 prop ，因为prop可以将基本URL添加到相对路径中。

$(this).find('img').each(function () {
    $(this).attr('src', address + $(this).attr('src'))
});