CSS的背景图像未显示

Question

I have written a Java WebApp with Vaadin 14.8.0 and SpringBoot. When I put the application in production mode and create a war file with the command "mvn clean package -Pproduction" and deploy it on my Wildfly, everything works normally. My CSS files are read and also activated. However, the path I use in the css file for the background image is not found.

"background-image: url("/META-INF/resources/img/zac-bromell-QwrTnOlWAmI-unsplash.jpg");"

If I enter the path directly as url:

"http://localhost:8080/planyoureplaylist-1.0-SNAPSHOT/META-INF/resources/img/zac-bromell-QwrTnOlWAmI-unsplash.jpg" 

I also get a 404 Not Found.

My css files are located in the root directory under ./frontend/styles . My image files can be found in src/main/resources/META-INF/resources/img/ .

I also looked at my WAR file with WINRAR. Since I notice that I find the image files in the directory WEB-INF\classes\META-INF\resources\img , but in the whole folder structure not my css files.

To my surprise the background image was displayed normally when I started the application not yet via an external wildfly.

In reference to the following link https://github.com/vaadin/flow/issues/11015 I understand that it is a bug of vaadin. However, since I am on Vaadin 14.8.0 and the bug should be fixed with 14.6.2 I do not understand the problem.

Gladly point out if something else is needed to solve the problem.

About help I would be very happy. Thanks in advance

Answer 1

The files in META-INF/resources are published in the server root so your META-INF/resources/img/zac-bromell-QwrTnOlWAmI-unsplash.jpg file is available at img/zac-bromell-QwrTnOlWAmI-unsplash.jpg inside your context root. Your background image CSS should thus be "background-image: url("img/zac-bromell-QwrTnOlWAmI-unsplash.jpg");"