Accessing static resources from template (Development as well as in Product

Flow
1

Hi all,

I have a static resource (svg image to display), which is currently present under ‘frontend/images’ folder. It is not yet clear to me how to reference it in the polymer template, e.g.:

<img src="frontend://images/image.svg">

If I use ‘frontend://’ placeholder in @Html imports, all is working well. I’ve seen that in CSS classes, all you need to do is to use url() function.
But, what is the correct way to do it directly with html tags like img?

Code should work when I’m developing as well as in production (after static resources are bundled into es5 & es6 folders).

Does any of you have a clue how to address this?
Thank you
Martin

PS: I’m using Vaadin v10.0.2 with flow-maven-plugin for production build.

2

You should use a relative path such as …/images/image.svg. Templates are used directly by the browser without being rewritten so no special protocols can be used there

3

Hi Artur,

well, that doesn’t work… Interestingly, relavite path is used in CSS (same template) like this:

background-image: url(../../../images/login-banner.jpg);

and when I’m looking at the productive html file loaded by browser I can see, that it has been rewritten:

background-image: url(http://localhost:8080/frontend-es6/images/login-banner.jpg);

I would expect same behavior for src attribute of img tag.

Thnx
Martin

4

So what happens with <img src="../../../images/login-banner.jpg">?

5

As expected, nothing :)… looks like relative paths are no good here.