ajax加载的html中img标签的url答案

【问题标题】：url for img tag in ajax loaded htmlajax加载的html中img标签的url
【发布时间】：2014-08-04 21:01:40
【问题描述】：

我正在使用 jQuery 的 get 方法加载一个 html 文件，并将整个正文内容放入 DOM，再次使用 jQuery。

我正在加载的这个 html 内容中有很多 img 标签。

例如，

<img src="warning.png">

warning.png 与服务器上的 html 文件在同一目录中。

服务器上的目录结构是这样的

/myapp/myfolder/content.html
/myapp/myfolder/warning.png

在具有 LTE 连接的移动浏览器上，无法加载此 html 内容中的图像。

但是，当我将 img 元素的 src 属性更改为绝对 url 时，如下所示

<img src="/myapp/myfolder/warning.png">

无论我使用什么连接，图像总是能正确加载。（LTE / 3G / wifi / 其他）

我当然可以用绝对值替换每个单独的 img 元素的 src 属性。但是，肯定会在一段时间后成为维护地狱。

我认为这与连接速度和从服务器异步加载html内容之间的关系有关。

有人知道吗？

【问题讨论】：

可能与您将 html 加载到具有不同目录的页面中有关。路径不再有效。重要的不是文件所在的位置，而是文件被使用的位置
Problemo 是响应您点击的 url。显示返回图片 url 的服务代码。
感谢您的回答@charlietfl 没错，文件被消耗的地方很重要。如果我没有通过 LTE 连接，即使我使用的 url 不正确，它也能正常工作。这仍然是一个谜，但不再是问题的一部分。也许这与浏览器缓存有关，无论如何，再次感谢
@charlietfl 如果您愿意，可以将其作为答案发布，以便我接受

【解决方案1】：

您应该能够创建一个 javascript 函数，该函数会自动为您更改图像 URL，这样可以省去您自己手动更新 url 的麻烦：

$("img").each(function(img){
    $(this).attr("src", "/myapp/myfolder/"+ $(this).attr("src"));
});

您可以在页面底部调用此函数。只需将它包含在您的母版页（或共享的包含文件）中。如果您的图片不在一个文件夹中，我建议您修改函数以了解您当前的 URL 是什么，并适当地更改“/myapp/myfolder/”。

我对移动浏览器的扭结了解不多，无法评论原因，但无论如何将链接更改为绝对路径是一种好习惯。

【讨论】：