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

【问题标题】：Server context-path and images url in CSSCSS 中的服务器上下文路径和图像 url
【发布时间】：2017-02-15 18:29:00
【问题描述】：

我使用 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');
}

你有什么想法吗？

感谢您的回答

【问题讨论】：

【解决方案1】：

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

如果您的文件夹结构看起来像（从src/main/resources 开始）：

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

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

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

【讨论】：