使用 jQuery 获取相对图像 src答案

【问题标题】：Getting relative image src with jQuery使用 jQuery 获取相对图像 src
【发布时间】：2009-06-04 06:57:44
【问题描述】：

我的图片标签如下所示：

<img src="/path/to/my/image.jpg" />

但是当我使用 jQuery 访问 src 位时，jQuery 会返回：

http://example.com/path/to/my/image.jpg

这在我正在进行的一些比较中引起了问题。我不想更改我的图像路径以使用绝对 URL。

关于如何从图像路径获取绝对 URL 的任何想法（这可能不像连接域那么简单 - 因为 URL 有时可能是绝对的），或者获取我在 HTML 中提供的路径？无论哪种方式，我都需要它们匹配。

根据 activa 的评论编辑

实际上并没有太多的 jQuery 代码要发布，我正在使用 cycle 插件，在 onbefore 函数中，我只是调用 next.src。我的 jQuery 和 JavaScript foo 不足以真正理解循环插件正在做什么来生成 next - 如果您熟悉循环的作用，我认为它是循环进入下一个图像的 DOM 元素。

我的图片标签其实是这样的：

<img src="/site_media/photologue/photos/cache/6927d406810ee9750a754606dcb61d28.jpg" alt="" class="landscape slideshow-image-1" />

在我的 onbefore 函数中，这段代码：

alert(next.src);

导致警报：

http://127.0.0.1:8000/site_media/photologue/photos/cache/6927d406810ee9750a754606dcb61d28.jpg

【问题讨论】：

你能发布你用来检索 src 属性的 jQuery 代码吗？因为这似乎不对。正如马里奥在下面指出的，jQuery 不会修改 src 属性
在我的情况下，我实际上想要绝对 URL，所以我只是在你修复它之前做了什么。太棒了:)

标签： javascript jquery

【解决方案1】：

$("img").attr("src") 返回 src 属性的实际值（在 FF3 和 IE7 中尝试过）

所以当你有

<img src="http://example.com/path/to/my/image.jpg" />

它会返回

http://example.com/path/to/my/image.jpg

当你有

<img src="/path/to/my/image.jpg" />

它会返回

/path/to/my/image.jpg

问题编辑后编辑

听起来你可能想试试

$(next).attr("src")

【讨论】：

【解决方案2】：

你为什么不剥掉它？

var hostname = 'http://' + window.location.hostname;

它将访问主机名

http://example.com

然后像这样重构你的变量

if( imgSrc == imgSrc2 ) ...

到

if( ImgSource(imgSrc) == imgSrc2 ) ...

使用

function ImgSource(path) {
    return hostname + path;
}

或者反过来

function ImgSource(path) {
    return path.replace(hostname, '');
}

【讨论】：

如果您在本地机器上进行测试，您应该使用 window.location.host 来获取附加到主机名的端口号。

【解决方案3】：

要始终获得完整的解析路径，请使用 Element.src，而不是 Element.getAttribute("src")（这似乎相当于 attr("src")）。

例如：

document.getElementsByTagName("img")[0].src

而不是：

document.getElementsByTagName("img")[0].getAttribute("src")

。我会让你 jqueryify .src。

【讨论】：

【解决方案4】：

我在似乎是基于 .NET 的服务器上通过 Ajax 加载的页面上发生了这种情况。即使路径是相对的，它也会返回完整的 URL，即使在所有其他浏览器中它也可以正常工作。仅在 IE 8 中发生。我无法基于域进行剥离，因为我正在处理的项目有多个环境。

如果我发现比拆分或正则表达式替换更好的方法，我会报告。

【讨论】：