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

Question

我使用百日咳作为模板开发了一个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');
}

Woukd你有什么想法吗？

感谢您的回答

Answer 1

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

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

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

你应该以某种方式参考图像：

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