【Spring Boot】Controllerでセットした値を元にプロジェクト内の画像ファイルを参照する

Controllerクラス側でmodel.addAttributeを利用してセットした値を利用して
View側で画像ファイルを参照するThymeleafeの記述方法をメモます。

※画像ファイルなどの配置ディレクトリや参照の方法についてはこちらの記事に書いています。

下記のソースコードの例ではth:eachを用い、Controllerから渡ってきたList型や配列など
コレクションに格納されている値を順番に画面に出力している。

プロジェクトのリソースにある画像ファイル名が
コレクションから返される文字列の値と同じ場合の例

<table>
  <tbody>
  <tr th:each="items:${items}">
    <th><img th:src="@{/images/{items}.jpg (items=${items})}" th:alt="${items} + の画像">
      <p th:text="${items}"></p>
    </th>
    <td><button class="button" type="submit" name="item" th:value="${items}">購入する</button></td>
  </tr>
  </tbody
</table>
4行目
コレクションから取り出した値を代入している変数を、さらに専用の変数 itemsに代入する。
<img th:src=”@{/images/{items}.png (items=${items})}” th:alt=”${items} + の画像”>

(items=${items})(変数ごとカッコで閉じる)

定義した変数を{}で囲み、画像ファイルの拡張子を続けて記述する。

Follow me!