php - 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 文件夹，除非我给它一个确切的路径，在我的实际站点中根据内容文件的位置一直在变化位于。

是否有一种非 hacky 的方式来解决这个问题，它不涉及我在我想要引用的每个图像或内容中放置确切的路径？

score 1 · Accepted Answer

我知道您说的是非 hacky，但您可以在加载内容后执行此操作

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

接着

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

score 0 · Accepted Answer

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

如果你的路径改变了，你只需要改变一个变量值。

score 0 · Accepted Answer

使用attr('src')而不是prop，因为 prop 可以将基本 url 添加到相对路径。

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

3 回答 3