Image url in <custom-style> not working in Chrome

Flow
1

Hi,

Im using Vaadin 12. Structure of my war project is:

appName
	src
		main
			webapp
				frontend
					styles
					img

I style my app layout via src\main\webapp\frontend\styles\shared-styles.html:

	<custom-style>
	<style>
	.page-layout {
		background-image: url('../img/bkg.jpg');
	}
	</style>
	</custom-style>

I user relative url for image as it was recommended (https://vaadin.com/docs/v12/flow/importing-dependencies/tutorial-include-css.html).

It works in FF- browser builds valid url “host:port/appName/frontend/img/bkg.jpg” because starts from styles path (host:port/appName/frontend/styles) so “…/” points to “host:port/appName/frontend/”.

But it doesn’t work in Chrome- browser builds invalid url “host:port/img/bkg.jpg” because starts from app path (host:port/appName) so “…/” points to “host:port/”.

When I use normal css file (styles.css, not shared-styles.html) and use “background-image: url(‘frontend/img/bkg.jpg’);” everything is ok (it works in Chrome and FF).

Can anyone help me to solve this problem when using custom-style in html, which seems to be the recommended approach?
Any help is appreciate :slight_smile:

2

Hi Dar,

Could you please share a small demo project with the same folder structure reproducing the issue so we may have a look at your issue.

Thanks,
Bogdan.

3

I have the same issue. What was the solution?

Thanks Jürgen

4

I did it in old-fashioned way - via style class in css file with: background-image: url(‘frontend/img/some.jpg’)

best regards,

5

I have the same issue with all relative paths in any html-File containing css-styles.
e.g. list-style-image: url(frontend/images/myImage.png)

Chrome displays the image correctly with the path “frontend/images/myImage.png” but
Firefox does not, cause of a wrong path.
It tries to find the image in
“http://localhost:8080/myvaadinproject/frontend/styles/frontend/images/myImage.png”

all *-style.html files are located in “frontend/styles”

Do you have any solution or workaround for this?