如何在 thymeleaf 中为 css 文件设置背景 url？

Question

我有一个 thymeleaf 模板，我没有导入 CSS 文件，并且想用 background-image: url{/image.jpg} 属性和相对图像 URL 声明 body 元素的样式属性。我想在不包括应用程序上下文名称的情况下加载 URL（ /myapp/ ）它。它类似于 这里 的问题，但它对我不起作用。

CSS：

 <style>
body {
    background: url(../img/Background.jpg)
                no-repeat center center fixed;
    background-size: cover;
}
</style>

但是上面的 CSS 不起作用，它访问了图像

http://localhost/img/Background.jpg.

因此，我必须将值设为 url(/myapp/img/Background.jpg) 才能正确加载图像。

我在 --- 中正确设置了 spring-context.xml mvc:resources 配置，用于 /img/ 请求正确加载并且它可以在其他地方工作。

弹簧上下文.xml

 <mvc:resources mapping="img/**" location="/WEB-INF/img/" />

那么如何使用thymeleaf的相对url动态加载背景url图片css值呢？

原文由 Lucky 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

所以，这里是如何使用 thymeleaf 的内联文本值在 css 中的背景图像 url 属性中设置动态相对路径，

 <style th:inline="text">
    body{
        background: url{[[@{/img/Background.jpg}]]}
                    no-repeat center center fixed;
    }
</style>

它使用相对路径加载图像，我们不必在 url 中指定“myapp”上下文名称。

原文由 Lucky 发布，翻译遵循 CC BY-SA 3.0 许可协议