使用"..“将图像url绝对化

Question

我有一个HTML文档，我正在转换一个图像，它的源url如下所示：

"../foo/bar/baz.png"

我正在使用一个tritium函数来绝对化图像源urls，但是"..“似乎把它难住了。它添加了主机名等前缀，但当它这样做时，它会添加多一个层。

例如，图像的正确URL为：

"www.host.com/foo/bar.png"

但出现它的页面是"www.host.com/site/baz/page.html"

因此，原始html中的图像的源是"../foo/bar.png"。

但是我得到的绝对结果是："www.host.com/site/foo/bar.png"

换句话说，它在文件树中向上移动到"/site/"，但它需要再向上移动一次。我真的看不出它在没有另一个"..“的原始页面上是如何工作的。我应该如何处理"..“在url里？

Answer 1

当您在Moovweb项目中时，我建议您在使用absolutize()函数之前操作有问题的src。

有没有一种简单的方法可以用3H来选择图像？我建议这样做，然后操作src属性：

$("./img[@id='']") {
  attribute("src", "/foo/bar.png")
}

在此之后，您应该能够使用absolutize()函数，并且src将被正确呈现。

Answer 2

..意味着向上遍历一级；您使用的是相对路径，而不是您应该使用的绝对路径。去掉这些点：

<img src="/foo/bar.png">将从域的根目录加载图像。

Answer 3

src="/foo/bar.png"和src="foo/bar.png"之间有很大的不同(注意第一个双引号后面的斜杠)

无论如何，第一个都指向http://example.com/foo/bar.png。

这就是为什么你会得到"www.host.com/site/foo/bar.png“(相对于文件路径上一级的)的原因。

两种解决方案：

1) src="/foo/bar.png" OR

2) src="../../foo/bar.png"

我总是推荐第一种方法，因为即使在移动文件之后，您也不必更改绝对URL。(我是通过艰苦的方式学会的)

附注:此规则也适用于CSS文件。