HTML import relative path

Question

I'm writing a Webcomponent. Therfore I have an index.html in which I import the Webcomponent:

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

As you see I have the component in a specific folder relative to the index.html. Now when I want to access a ressource from the test.html which is in the components folder. I want to do this like:

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

for css or:

 <img src="test.gif">

but it doesn't work. It only works when I change the path relative of the image to the index.html like:

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

I know you can do tricks like document.currentScript.baseURI but I want to write plain CSS and HTML. Is there an easy way to do so?

Answer 1

You might want to take a look at how the Polymer guys do it. Code is in src/standard/resolveUrl.html (snapshot) and src/lib/resolve-url.html (snapshot).

It isn't too pretty. From this alone, I infer that at the time of this writing the answer to your question seems to be "no, it isn't easy and there is no way to do it without using tricks".