Question

我已经看到了建议将绝对路径转换为相对路径的答案的问题，但这对我来说是不可能的，因为我的HTML文件存储在各种目录中并使用模板，其中一行是指CSS。所以fragments.html就像这样开始：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
    xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head th:fragment="common_header(title)">
  <link rel="stylesheet" th:href="@{/css/style.css}" />
:

实际的HTML看起来像

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
    xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head th:replace="fragments :: common_header('List Items')">
  <title>Main</title>
</head>
<body>
  <script th:src="@{/js/rss/list.js}"></script>
:

现在/css/style.css：

.item-subject::before {
  content: url("/images/new.png");
  margin-right: 5px;
}

通过上下文路径，显而易见的是，这并不起作用。但是我能做什么？我的意思是th:href使link指向一个有效的资源，所以现在CSS的内容也应该以某种方式被篡改。

很明显，content - 行必须包含魔法，但我该怎样做才能完成所有这些工作？

Answer 1

你can parse css files with thymeleaf，就像你可以解析html文件一样。 Thymeleaf 3特别具有CSS模式。您必须像设置html文件（here is a sample project）一样设置控制器，但之后您可以直接在css中使用url表达式，如下所示：

.item-subject::before {
  content: url([[@{/images/new.png}]]);
  margin-right: 5px;
}

哪个可以解决您使用绝对网址时遇到的任何问题。

Thymeleaf：css-File中的绝对引用

1 个答案: