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");"