.css 文件中的 Thymeleaf URL 表达式

Question

我正在使用 Spring MVC 和 Thymeleaf 视图引擎。我的页面有一个带有 CSS 的外部 style.css 文件。在 CSS 文件中，我想引用一个相对图像 URL.

这是我的style.css文件：

.background {
    width: 100%;
    background-image: url('/path/to/image/bg.png');
}

以上尝试访问具有以下 URL 的图像，该图像不存在：

http://localhost/path/to/image/bg.png

我的真实形象在：

http://localhost/myapp/path/to/image/bg.png

这个 Whosebug 问题给出了我的内联问题的答案 CSS：

但是如何为外部 .css 文件执行此操作？

Answer 1

将带有图像 path/to/image/bg.png 的所有图像文件夹结构放入 resources/static 下的 images 文件夹中。然后在CSS中引用为：

.background {
    width: 100%;
    background-image: url('../images/path/to/image/bg.png');
}

然后您可以在您的模板中使用此 CSS 作为：

<head>
    <link rel="stylesheet" media="screen" th:href="@{/css/application.css}"/>
</head>

您的文件结构应如下所示：

Thymeleaf URL expression in .css file