.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');
}

上面的方法尝试使用以下网址访问图片，该网址不存在：

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

我的真实形象是：

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

这个StackOverflow问题为我的内联CSS问题提供了答案：如何为百里香中的CSS文件设置背景url？

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

Answer 1

将所有图像文件夹结构以及带有图像的图像path/to/image/bg.png放在下的images文件夹中resources/static。然后在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>

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