1. 概述
Thymeleaf 是一个流行的 Java 模板引擎，与 Spring 框架兼容，用于生成 HTML 视图。Web 应用程序的主要功能之一是渲染图像。
Spring Boot 对 Java 文件和资源文件的组织结构进行了优化，使得在 HTML 文件中定义图片路径变得简单。
在这篇教程中，我们将设置一个简单的 Spring Boot 项目，并从 resources 文件夹中提供图像。同时，我们还将了解如何在使用 Thymeleaf 时避免定义图片路径。
2. 项目设置
首先，通过在 pom.xml 中添加 spring-boot-starter-web 和 spring-boot-starter-thymeleaf 来启动一个简单的 Spring Boot 项目：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<version>3.2.1</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>3.2.1</version>
</dependency>
在接下来的部分，我们将学习如何在带有 Thymeleaf 的 Spring Boot 应用程序中显示图像。
3. 在 Thymeleaf 模板中显示图像
要在 Thymeleaf 中显示图像，我们需要遵循标准的目录结构，即为 HTML 文件创建一个 templates 目录，为像图片这样的静态资源创建一个 static 目录。
3.1. 设置目录
Spring Boot 默认为我们配置了目录结构。它将 Java 源文件与静态资源和模板分开，并自动创建一个资源目录，我们可以在此添加静态文件和模板。
当使用 Thymeleaf 启动 Spring Boot 应用时，通常会在 resources 目录下创建 templates 和 static 目录。
Thymeleaf 的 HTML 模板文件应放在 templates 目录中，而静态资源如 JavaScript、CSS、图片等应放在 static 目录中。
首先，我们在 static 文件夹中创建一个 images 目录。接着，在 images 目录下添加一个名为 cat.jpg 的图片文件：
现在可以从视图文件中引用 cat.jpg 文件。
3.2. 在 Thymeleaf 中引用图像
首先，我们在 templates 目录下创建一个名为 index.html 的新文件，编写简单的 HTML 代码来从 static 文件夹中显示图像：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Baeldung Pet Store</title>
</head>
<body>
<h6>Pet Store</h6>
<img th:src="@{images/cat.jpg}" alt="cat">
</body>
</html>
值得注意的是，我们在 HTML 代码中添加了一个 Thymeleaf 的 th:src 属性，指定图像的相对路径。
定义图像路径的方式对于成功显示图像至关重要。Spring 预设会从 resource 文件夹提供静态资源。因此，我们在引用图像和其他静态文件时可以省略 resource 和 static 路径部分。
此外，我们也可以不创建子目录直接将图片添加到静态文件夹：
将 cat.jpg 文件复制到静态文件夹：
在这种情况下，只需要指定图像名称及其扩展名即可：
// ...
<h6>Pet Store</h6>
<img th:src="@{cat.jpg}" alt="">
// ...
然而，为了保持文件的整洁，建议为静态文件创建子目录。
最后，让我们创建一个控制器类并添加一个路由到 index 页面：
@Controller
public class DisplayController {
@RequestMapping("/")
public String home(){
return "index";
}
}
在这里，我们将 / 路径映射到 index 视图模板，这样当我们加载应用程序时就可以显示图像：
由于相对路径允许 Spring 自动在静态资源文件夹中找到图像文件，所以图像能够正确显示，无需指定完整的绝对路径。
3.3. 避免失败
简而言之，如果在图像路径中包含 resource 或 static 关键字，图像将无法加载：
// ...
<img th:src="@{../static/images/cat.jpg}" alt="" width="100px">
// ...
上述代码中指定了包含 static 文件夹的图像路径。由于 Spring Boot 已预设检查静态文件夹，这会导致错误的路径，无法找到图像。
因此，我们在声明路径时应避免包含 resource 或 static 关键字。Spring 会在默认情况下检查这些文件夹来解析图像路径。
4. 总结
在这篇文章中，我们学习了如何使用 th:src 属性在 Thymeleaf 模板中显示图像。同时，我们也了解了如何通过避免在路径声明中使用 resources 或 static 关键字来正确指定图像路径。
如往常一样，示例代码可以在 GitHub 上找到。