CSS 中的服务器上下文路径和图像 url

Question

我使用 thymeleaf 作为模板开发了一个 spring-boot 应用程序。我在 application.properties.

中使用服务器上下文路径

server.context-path: /myapp/v1.0

当我需要在 views.html 中显示图像时，我使用此语法

<img th:src="@{/img/first.png}" />

一切都很酷

但是当我需要在我的 css 文件中使用图像时它不起作用

/* Search input */
input.search-input {
    text-align: left;
    background-image: url('/img/search.png');
}

你有什么想法吗？

感谢您的回答

Answer 1

在 CSS 文件中，您应该使用相对路径引用图像。

如果您的文件夹结构如下（从 src/main/resources 开始）：

.
├── application.properties
├── static
│   ├── css
│   │   └── style.css
│   └── img
│       └── first.png
└── templates
    └── index.html

您应该以某种方式引用图像：

background-image: url("../img/first.png");

Server context-path and images url in CSS