Thymeleafでimgタグのsrcを動的に設定する方法

Thymeleaf Java

Thymeleafでimgタグのsrcを動的に設定する方法

Thymeleafでimgタグのsrc属性を動的に設定するには、Thymeleafの式言語を使用して、サーバーサイドから渡された値を利用します。
以下のような方法で実装できます。

1. コントローラの設定

まず、コントローラで画像のパスをモデルに追加します。
例えば、SpringBootを使用している場合、次のように設定できます。

@Controller
public class ImageController {

    @GetMapping("/image")
    public String getImagePage(Model model) {
        // 画像のパスをモデルに追加
        model.addAttribute("imagePath", "/images/example.png");
        return "imagePage";
    }
}

2. Thymeleafテンプレート

次に、Thymeleafテンプレートで動的にsrc属性を設定します。
以下のように、th:src属性を使用して動的なパスを指定できます。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>画像ページ</title>
</head>
<body>
    <h1>画像表示</h1>
    <img th:src="${imagePath}" alt="Example Image" />
</body>
</html>

説明

th:src="${imagePath}"
th:src属性を使って、imagePathという名前の変数から値を取得し、src属性に設定します。

これで、サーバーサイドから渡された画像のパスを使って、imgタグのsrc属性を動的に設定することができます。