CSS的背景圖像未顯示

Question

我用 Vaadin 14.8.0 和 SpringBoot 編寫了一個 Java WebApp。 當我將應用程序置於生產模式並使用命令“mvn clean package -Pproduction”創建一個war文件並將其部署到我的Wildfly上時，一切正常。 我的 CSS 文件被讀取並被激活。 但是，找不到我在 css 文件中用於背景圖像的路徑。

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

如果我直接作為 url 輸入路徑：

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

我也得到一個 404 Not Found。

我的 css 文件位於./frontend/styles下的根目錄中。 我的圖像文件可以在src/main/resources/META-INF/resources/img/中找到。

我還用 WINRAR 查看了我的 WAR 文件。 因為我注意到我在WEB-INF\classes\META-INF\resources\img目錄中找到了圖像文件，但在整個文件夾結構中不是我的 css 文件。

令我驚訝的是，當我尚未通過外部野蠅啟動應用程序時，背景圖像正常顯示。

參考以下鏈接https://github.com/vaadin/flow/issues/11015我了解這是 vaadin 的錯誤。 但是，由於我在 Vaadin 14.8.0 上並且應該使用 14.6.2 修復該錯誤，所以我不明白這個問題。

很高興指出是否需要其他方法來解決問題。

關於幫助我會很高興。 提前致謝

Answer 1

META-INF/resources中的文件發布在服務器根目錄中，因此您的META-INF/resources/img/zac-bromell-QwrTnOlWAmI-unsplash.jpg文件可在img/zac-bromell-QwrTnOlWAmI-unsplash.jpg中找到上下文根。 因此，您的背景圖像 CSS 應該是"background-image: url("img/zac-bromell-QwrTnOlWAmI-unsplash.jpg");"