1. Overview

1.概述

Thymeleaf is a popular Java template engine that’s compatible with the Spring framework to generate HTML views. One of the main features of a web application is rendering an image.

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

Spring Boot‘s organized directory structure for Java files and resource files makes it easy to define the path to an image in an HTML file.

Spring Boot 的 Java 文件和资源文件的目录结构非常有条理，可以轻松定义 HTML 文件中的图片路径。

In this tutorial, we’ll set up a simple Spring Boot project and serve an image from the resources folder. Also, we’ll see how not to define an image path when using Thymeleaf.

在本教程中，我们将建立一个简单的 Spring Boot 项目，并从 resources 文件夹中提供图片。此外，我们还将了解在使用 Thymeleaf 时如何不定义图片路径。

2. Project Setup

2.项目设置

To begin, let’s bootstrap a simple Spring Boot project by adding spring-boot-starter-web and spring-boot-starter-thymeleaf to the pom.xml:

首先，让我们通过向 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>

In the subsequent sections, we’ll see how to display images in a Spring Boot application with Thymeleaf.

在接下来的章节中，我们将了解如何使用 Thymeleaf 在 Spring Boot 应用程序中显示图片。

3. Displaying Images in Thymeleaf Templates

3.在百叶窗模板中显示图片

To display an image in Thymeleaf, we need to follow the standard convention of creating a templates directory for HTML files and a static directory for assets like images.

要在 Thymeleaf 中显示图片，我们需要遵循标准惯例，为 HTML 文件创建 templates 目录，为图片等资产创建 static 目录。

3.1. Setting up Directories

3.1.设置目录

By default, Spring Boot configures the directory structure for us. It separates Java source files from static resources and templates. Also, it automatically creates a resources directory where we can add static files and templates.

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

When bootstrapping a Spring Boot application with Thymeleaf, the convention is to create templates and static directories within the resources directory.

在使用 Thymeleaf 引导 Spring Boot 应用程序时，常规做法是在 resources 目录中创建 templates 和 static 目录。

Thymeleaf HTML template files should be placed in the templates directory, while static assets like JS, CSS, images, etc. should be placed in the static directory.

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

First, let’s create an images directory in the static folder. Next, let’s add an image file named cat.jpg to the images directory:

首先，让我们在 static 文件夹中创建一个 images 目录。然后，在 images 目录中添加一个名为 cat.jpg 的图像文件：

The cat.jpg file can now be referenced from the view files.

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

3.2. Referencing Images in Thymeleaf

3.2.在 Thymeleaf 中引用图片

To begin with, let’s create a new file named index.html in the template directory and write a simple HTML code to display an image from the static folder:

首先，让我们在模板目录中创建一个名为 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>

Notably, we add a Thymeleaf th:src attribute to the HTML code to specify the relative path to the image.

值得注意的是，我们在 HTML 代码中添加了 Thymeleaf th:src 属性，以指定图片的相对路径。

The way we define the path to the image is essential to successfully display the image. Spring is preconfigured to serve static resources from the resource folder. Therefore, we can omit the resource and static path segments when referencing images and other static files.

我们定义图片路径的方式对于成功显示图片至关重要。Spring 已预先配置为从 resource 文件夹中提供静态资源。因此，在引用图片和其他静态文件时，我们可以省略 resource 和 static 路径段。

Additionally, we can add an image to the static folder without creating a folder for it:

此外，我们还可以在静态文件夹中添加图片，而无需为其创建文件夹：

Let’s copy the cat.jpg file to the static folder:

让我们将 cat.jpg 文件复制到静态文件夹：

In this case, we only need to specify the image name and its extension:

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

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

However, it’s advisable to create a sub-folder for static files to keep them organized.

不过，建议为静态文件创建一个子文件夹，使其井井有条。

Finally, let’s create a controller class and add a route to the index page:

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

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

Here, we create a route mapping “/” path to the index view template. This allows us to display the image when we load the application:

在这里，我们创建了一个路由，将”/”路径映射到 index 视图模板。这样，我们就可以在加载应用程序时显示图片：

The image displays properly because the relative path allows Spring to locate the image file in the static resource folder without needing to specify the full absolute path.

由于相对路径允许 Spring 在静态资源文件夹中找到图像文件，而无需指定完整的绝对路径，因此图像可以正常显示。

3.3. Avoiding Failure

3.3.避免失败

Simply put, specifying the resource or static folder in the image path will cause the image to fail to load:

简单地说，在图像路径中指定 resource 或 static 文件夹会导致图像加载失败：

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

The code above specifies the image path with the static folder. Since Spring Boot is preconfigured to check the static folder already, this results in a faulty path, and the image cannot be found.

上面的代码用 static 文件夹指定了图片路径。由于 Spring Boot 已预先配置为检查 static 文件夹，结果导致路径错误，无法找到图片。

Therefore, we should avoid including the resource or the static keyword in the image file path. Spring will check those folders by default when resolving the image path.

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

4. Conclusion

4.结论

In this article, we learned how to display an image in Thymleaf templates using the th:src attribute. Also, we saw how to properly specify the path to the images by avoiding resources or static keywords in the path declaration.

在本文中，我们学习了如何使用 th:src 属性在 Thymleaf 模板中显示图片。此外，我们还了解了如何在路径声明中避免使用 resources 或 static 关键字，从而正确指定图片的路径。

As always, the source code for the examples is available over on GitHub.

与往常一样，这些示例的源代码可在 GitHub 上获取。