HTML 导入相对路径

Question

我正在编写一个 Web 组件。因此，我有一个 index.html，我在其中导入了 Web 组件：

<link rel="import" href="components/test.html">

如您所见，我将组件放在相对于 index.html 的特定文件夹中。现在，当我想从组件文件夹中的 test.html 访问资源时。我想这样做：

background-image: url("test.gif");

对于 css 或：

 <img src="test.gif">

但它不起作用。它仅在我将图像的相对路径更改为 index.html 时才有效，例如：

<img src="components/test.gif">

我知道你可以使用document.currentScript.baseURI 之类的技巧，但我想编写纯 CSS 和 HTML。有没有简单的方法？

Answer 1

您可能想看看how the Polymer guys do it。代码在src/standard/resolveUrl.html (snapshot) 和src/lib/resolve-url.html (snapshot) 中。

这不是太漂亮。仅凭这一点，我推断在撰写本文时，您的问题的答案似乎是“不，这并不容易，而且不使用技巧就无法做到”。