2

I have an HTML document I'm transforming with an image whose source url looks like this:

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

I'm using a tritium function to absolutize image source urls, but the ".." seems to be stumping it. It's prepending the hostname, etc, but when it does, it adds one too many layers.

So for example, the correct URL of the image is:

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

But the page on which it appears is at "www.host.com/site/baz/page.html"

The source of the image in the original html is therefore "../foo/bar.png"

But the absolutized result I'm getting is: "www.host.com/site/foo/bar.png"

In other words it's going up the file tree to "/site/", but it needs to be going up one more. I don't really see how it even works on the original page without another ".." How should I be handling the ".." in the url?

4

3 回答 3

3

..意味着向上遍历一个级别；您使用的是相对路径，而不是您应该使用的绝对路径。删除点：

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

于 2013-04-24T00:47:03.203 回答
2

src="/foo/bar.png"和之间有很大的不同src="foo/bar.png"（注意第一个双引号后的斜线）

第一个指向http://example.com/foo/bar.png没关系。
然而，第二个（没有开始的斜杠）是相对 URL，因此输出路径取决于图像出现的文件。

这就是为什么你得到“www.host.com/site/foo/bar.png”（相对于文件路径上一级）。

两种解决方案：
1）src="/foo/bar.png"或
2）src="../../foo/bar.png"

我总是推荐第一种方法，因为即使在您移动文件之后，您也不必更改绝对 URL。（我学得很辛苦）

PS这条规则也适用于CSS文件。（例如在指定背景图片的URL时）如果使用绝对路径，当你改变CSS文件的目录时，你就不用撞墙了。

于 2013-04-24T01:12:20.527 回答
1

当您在 Moovweb 项目中时，我建议您在使用该功能之前处理有问题的 src。absolutize()

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

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

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

于 2013-04-26T00:24:41.333 回答