使用 Thymeleaf 顯示圖像
1. 概述
Thymeleaf 是一種流行的 Java 模板引擎，它與 Spring 框架相容以產生 HTML 視圖。 Web 應用程式的主要功能之一是渲染圖像。
Spring Boot 為 Java 檔案和資源檔案組織的目錄結構使得在 HTML 檔案中定義圖片的路徑變得容易。
在本教程中，我們將設定一個簡單的 Spring Boot 專案並提供resources資料夾中的圖像。另外，我們還將了解如何在使用 Thymeleaf 時不定義影像路徑。
2. 項目設定
首先，讓我們透過將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 應用程式中顯示圖像。
3. 在 Thymeleaf 模板中顯示圖像
要在 Thymeleaf 中顯示圖像，我們需要遵循為 HTML 檔案建立templates目錄和為圖像等資源建立static目錄的標準約定。
3.1.設定目錄
預設情況下，Spring Boot 為我們配置了目錄結構。它將 Java 原始檔與靜態資源和模板分開。此外，它還會自動建立一個資源目錄，我們可以在其中新增靜態檔案和範本。
使用 Thymeleaf 引導 Spring Boot 應用程式時，慣例是在resources目錄中建立templates和static目錄。
Thymeleaf HTML 模板檔案應放置在templates目錄中，而 JS、CSS、圖片等靜態資源應放置在static目錄中。
首先，我們在static資料夾中建立一個images目錄。接下來，我們將一個名為cat.jpg的圖像檔案加入到images目錄中：
現在可以從視圖檔案引用cat.jpg檔案。
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 程式碼中加入了 Thymeleaf th:src屬性來指定圖片的相對路徑。
我們定義影像路徑的方式對於成功顯示影像至關重要。 Spring 已預先配置為從resource資料夾提供靜態資源。因此，我們在引用圖像和其他靜態檔案時可以省略resource和static路徑段。
此外，我們可以將圖像新增到靜態資料夾中，而無需為其建立資料夾：
讓我們將cat.jpg檔案複製到 static 資料夾：
在這種情況下，我們只需要指定圖像名稱及其擴展名：
// ...
<h6>Pet Store</h6>
<img th:src="@{cat.jpg}" alt="">
// ...但是，建議為靜態文件建立一個子資料夾以保持它們的組織。
最後，讓我們建立一個控制器類別並新增到索引頁的路由：
@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屬性在 Thymleaf 模板中顯示圖像。此外，我們還了解如何透過避免路徑聲明中的resources或static關鍵字來正確指定影像的路徑。
與往常一樣，範例的原始程式碼可在 GitHub 上取得。