使用 Spring Boot 和 Thymeleaf 外部化网站图标

Question

使用 Spring Boot 和 Thymeleaf 外部化网站图标

出于不重要的原因，我试图从不在 classpath 上的目录中获取我的 Spring Boot 项目中的图标。

我能够加载该目录的图像或其他资产，但由于某种原因无法加载图标。

这是我创建的一个演示项目，用于说明问题和到目前为止我尝试过的事情

.
├── build.gradle
├── gradle
│   └── wrapper
│       ├── gradle-wrapper.jar
│       └── gradle-wrapper.properties
├── gradlew
├── settings.gradle
└── src
    ├── main
    │   ├── java
    │   │   └── com
    │   │       └── example
    │   │           └── demo
    │   │               ├── Demo2Application.java
    │   │               ├── ExternalConfig.java
    │   │               └── PageController.java
    │   └── resources
    │       ├── application.properties
    │       ├── static
    │       └── templates
    │           └── index.html
    └── test
        └── java
            └── com
                └── example
                    └── demo
                        └── Demo2ApplicationTests.java

• 我有一个名为ExternalConfig.java的@Configuration类。
• 我有一个名为PageController.java的@Controller类，用于将 Thymeleaf 模板返回给浏览器。
• application.properties只包含一个条目
  • test.repoPath = /path/to/external/directory

Demo2Application（启动类）

@SpringBootApplication
public class Demo2Application {
    public static void main(String[] args) {
        SpringApplication.run(Demo2Application.class, args);
    }

}

页面控制器

@Controller
public class PageController {

    @GetMapping("/")
    public String getIndex () {
        return "index";
    }
}

索引.html

请注意，我在这里添加了一个额外的img行来向自己展示我可以从外部目录获取内容。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title th:text="${blogTitle}"/>
    <link rel="icon"  th:href="@{~/blog-repo/images/favicon.ico}" sizes="any" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}"/>
</head>
<body>
    <p>Just to render something</p>
    <img th:src="@{~/testing-path/images/logo.svg}" alt="Blog Logo" height="200px"/>
</body>
</html>

ExternalConfig.java（我正在尝试进行更改的地方）

这就是魔法应该发生的地方。 根据我在网上找到的内容，解决方案是向ResourceHandlerRegistry添加一个新的resourceHandler 。 这允许 Thymeleaf 和 Spring 提供图像资产。 我相信如果您尝试将您的网站图标存储在您的类路径中的不同文件夹中，它也会起作用。 但是对于外部文件，它似乎不起作用。 这是代码。

@Configuration
@Data
@Validated
@ConfigurationProperties(prefix = "test")
public class ExternalConfig implements WebMvcConfigurer {

    private String repoPath;
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        repoPath = repoPath.endsWith(File.separator) ? repoPath : repoPath + File.separator;
        var resourceLocationRoot = "file:" + repoPath;
        registry.addResourceHandler("/testing-path/**").addResourceLocations(resourceLocationRoot);
        registry.addResourceHandler("/favicon.ico").addResourceLocations(resourceLocationRoot + "/images/");
    }
}

当我调试时，我可以看到该路径已正确添加到注册表中。 当我转到http://localhost:8080时， index.html页面会按预期显示以及我放入 html 文件中的img 。 但是，该图标没有显示。

我也尝试过指定确切文件的特定文件路径，但这也不起作用。 registry.addResourceHandler("/favicon.ico").addResourceLocations(resourceLocationRoot + "/images/favicon.ico");

我在这个项目中使用 Spring Boot 3.0.0。

Answer 1

这种情况下的解决方案有两个：

硬编码 resourceHandler 的特定路径

registry.addResourceHandler("/favicon.ico").addResourceLocations(resourceLocationRoot + "/images/favicon.ico");

在我的模板中注释掉明确的网站图标请求

<!--    <link rel="icon"  th:href="@{~/blog-repo/images/favicon.ico}" sizes="any" />-->

Answer 2

也可以从自定义位置提供网站图标，如下所述：

• Baeldung 的Spring Boot 网站图标指南

例如有一个application.properties像：

favicon.directory = /path/to/external/directory

以及使用自定义ResourceHttpRequestHandler应用SimpleUrlHandlerMapping的配置，该配置从任何Resource加载favicon.ico ，例如：

@Configuration
@ConfigurationProperties(prefix = "favicon")
public class FaviconConfiguration {

    File directory;  // configured in application.properties

    @Bean
    public SimpleUrlHandlerMapping customFaviconHandlerMapping() {
        SimpleUrlHandlerMapping mapping = new SimpleUrlHandlerMapping();
        mapping.setOrder(Integer.MIN_VALUE);  // to be first
        mapping.setUrlMap(Collections.singletonMap("/favicon.ico", faviconRequestHandler()));  // use the handler defined below

        return mapping;
    }

    @Bean
    protected ResourceHttpRequestHandler faviconRequestHandler() {
        ResourceHttpRequestHandler requestHandler = new ResourceHttpRequestHandler();
        FileSystemResource faviconResource = new FileSystemResource(directory);
        List<Resource> locations = Arrays.asList(faviconResource);
        requestHandler.setLocations(locations);

        return requestHandler;
    }
}

这比已经回答的解决方案有 2 个好处：

1. File类型的属性已经被验证为路径（可以添加额外的检查，如exists()或isDirectory() ）
2. 配置类是隔离的并遵循 SRP（单一职责：favicon 映射）