Spring Boot中使用Thymeleaf显示图像

Thymeleaf是一种流行的 Java 模板引擎，它与 Spring 框架兼容以生成 HTML 视图。Web 应用程序的主要功能之一是渲染图像。

Spring Boot为 Java 文件和资源文件组织的目录结构使得在 HTML 文件中定义图像的路径变得很容易。

在本教程中，我们将设置一个简单的 Spring Boot 项目并提供资源文件夹中的图像。另外，我们还将了解如何在使用 Thymeleaf 时不定义图像路径。

首先，让我们通过将spring-boot-starter-web和spring-boot-starter-thymeleaf添加到pom.xml来引导一个简单的 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 应用程序中显示图像。

要在 Thymeleaf 中显示图像，我们需要遵循为 HTML 文件创建模板目录和为图像等资源创建静态目录的标准约定。

1. 设置目录
默认情况下，Spring Boot 为我们配置了目录结构。它将 Java 源文件与静态资源和模板分开。此外，它还会自动创建一个资源目录，我们可以在其中添加静态文件和模板。

使用 Thymeleaf 引导 Spring Boot 应用程序时，惯例是在resources目录中创建模板和静态目录。

Thymeleaf HTML 模板文件应放置在templates目录中，而 JS、CSS、图像等静态资源应放置在static目录中。

首先，我们在静态文件夹中创建一个图像目录。接下来，我们将一个名为cat.jpg的图像文件添加到images目录中：

用于thymeleaf图片展示的图像文件夹和图像文件

现在可以从视图文件引用cat.jpg 文件。

2. 在 Thymeleaf 中引用图像
首先，我们在模板目录中创建一个名为index.html的新文件，并编写一段简单的 HTML 代码来显示静态文件夹中的图像：

<!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 已预先配置为从资源文件夹提供静态资源。因此，我们在引用图像和其他静态文件时可以省略资源和静态路径段。

此外，我们可以将图像添加到静态文件夹中，而无需为其创建resources/static文件夹：我们将cat.jpg文件复制到 static 文件夹：resources/static/cat.jpg

在这种情况下，我们只需要指定图像名称及其扩展名：

// ...
<h6>Pet Store</h6>
<img th:src="@{cat.jpg}" alt="">
// ...

但是，建议为静态文件创建一个子文件夹以保持它们的组织。

最后，让我们创建一个控制器类并添加到索引页的路由：

@Controller
public class DisplayController {
    @RequestMapping("/")
    public String home(){
        return "index";
    }
}

在这里，我们创建一个将“/”路径映射到索引视图模板的路由。这允许我们在加载应用程序时显示图像
相对路径允许Spring在静态资源文件夹中定位图像文件，无需指定完整的绝对路径。

如何避免图像定位错误？
简单来说，在图片路径中指定资源或静态文件夹会导致图片加载失败：

// ...
<img th:src="@{../static/images/cat.jpg}" alt="" width="100px">
// ...

上面的代码指定了静态文件夹的图像路径。由于 Spring Boot 已预先配置为检查静态文件夹，因此这会导致路径错误，并且无法找到图像。

因此，我们应该避免在镜像文件路径中包含resource或static关键字。Spring在解析图像路径时默认会检查这些文件夹。

结论
在本文中，我们学习了如何使用th:src属性在 Thymleaf 模板中显示图像。此外，我们还了解了如何通过避免路径声明中的资源或静态关键字来正确指定图像的路径。