1. 概述
Thymeleaf 是一個流行的 Java 模板引擎，與 Spring 框架兼容，用於生成 HTML 視圖。 在 Web 應用程序中，渲染圖像是一個主要功能。
Spring Boot 組織良好的目錄結構，用於 Java 文件和資源文件，使得在 HTML 文件中定義圖像路徑變得容易。
在本教程中，我們將設置一個簡單的 Spring Boot 項目，並從 resources 文件夾中提供圖像。 此外，我們還將瞭解如何在不定義圖像路徑的情況下使用 Thymeleaf。
2. 項目設置
為了開始，讓我們通過向 <em>pom.xml</em> 添加 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>在後續部分，我們將看到如何在 Spring Boot 應用程序中使用 Thymeleaf 來顯示圖像。
3. 在 Thymeleaf 模板中顯示圖片
要在一個 Thymeleaf 模板中顯示圖片，我們需要遵循標準的約定，即為 HTML 文件創建一個 <em >templates</em > 目錄，以及為靜態資產（如圖片）創建一個 <em >static</em > 目錄。
3.1. 設置目錄結構
Spring Boot 默認配置好目錄結構，將 Java 源代碼文件與靜態資源和模板分開。它還會自動創建一個 resources 目錄，用於存放靜態文件和模板。
當使用 Thymeleaf 啓動 Spring Boot 應用程序時，約定是創建 <em lang="en">templates</em 和 <em lang="en">static</em 目錄，位於 <em lang="en">resources</em> 目錄下。
Thymeleaf HTML 模板文件應放置在 <em lang="en">templates</em> 目錄中，而靜態資產（如 JS、CSS、圖像等）應放置在 <em lang="en">static</em> 目錄中。
首先，讓我們在 <em lang="en">static</em> 文件夾中創建一個 <em lang="en">images</em> 目錄。接下來，我們將一個名為 <em lang="en">cat.jpg</em> 的圖像文件添加到 <em lang="en">images</em> 目錄中：
現在，<em lang="en">cat.jpg</em> 文件可以從視圖文件中引用。
3.2. 在 Thymeleaf 中引用圖片
首先，在模板目錄下創建一個名為 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 代碼中添加了 屬性，以指定圖像的相對路徑。
定義圖像路徑的方式對於成功顯示圖像至關重要。 Spring 已預先配置為從 文件夾提供靜態資源。因此，在引用圖像和其他靜態文件時，我們可以省略 和 段，
此外，我們可以在不為它創建文件夾的情況下將圖像添加到靜態文件夾中：
讓我們將 文件複製到靜態文件夾中：
src="/file/story/attachments/image/l/4bbf5b52-acc5-46d1-9bc8-26d3a7c18a4c">
在這種情況下，我們只需要指定圖像名稱及其擴展名：
// ...
<h6>Pet Store</h6>
<img th:src="@{cat.jpg}" alt="">
// ...但是，建議為靜態文件創建子文件夾，以保持文件組織。
最後，讓我們創建一個控制器類併為首頁添加路由：
@Controller
public class DisplayController {
@RequestMapping("/")
public String home(){
return "index";
}
}在這裏，我們為“/”路徑創建了一個路由，將其映射到 index 視圖模板。這使得在加載應用程序時能夠顯示圖像。
圖像顯示正常，因為相對路徑允許 Spring 在靜態資源文件夾中定位圖像文件，而無需指定完整的絕對路徑。
3.3. 避免失敗
簡單來説，在圖像路徑中指定 資源 或 靜態 文件夾會導致圖像無法加載：
// ...
<img th:src="@{../static/images/cat.jpg}" alt="" width="100px">
// ...上述代碼指定了圖像路徑，包含 static 文件夾。由於 Spring Boot 默認已配置檢查靜態文件夾，因此導致路徑錯誤，無法找到圖像。
因此，我們應避免在圖像文件路徑中包含 resource 或 static 關鍵字。Spring 默認會在解析圖像路徑時檢查這些文件夾。
4. 結論
在本文中，我們學習瞭如何使用 Thymeleaf 模板中的 th:src 屬性來顯示圖像。 此外，我們還看到了如何正確指定圖像路徑，避免在路徑聲明中使用 resources 或 static 關鍵字。
