Thymeleafのth:srcの使い方を完全ガイド！初心者でもわかる画像やリソース設定
生徒
「Thymeleafで画像やCSSファイルのパスを指定する方法はありますか？」
先生
「はい、Thymeleafではth:srcを使って、HTMLの画像パスやリソースのリンクを簡単に指定できますよ。」
生徒
「th:hrefは知っているんですけど、th:srcも似たような使い方なんですか？」
先生
「そうですね！基本的な考え方は同じですが、画像や外部リソースに対して使うのがth:srcです。それでは、具体的に見ていきましょう！」
1. th:srcとは？
Thymeleafのth:srcは、HTMLの<img>タグや<script>タグのsrc属性をサーバーサイドから動的に指定するための属性です。th:hrefがリンクに使われるのに対し、th:srcは画像や外部リソースに使われます。
例えば、動的な画像ファイルのURLやCSSファイルのパスを指定したいときに役立ちます。
2. th:srcの基本的な使い方
th:srcの基本的な使い方は次のとおりです。画像のパスを動的に指定する例を見てみましょう。
<img th:src="@{/images/sample.jpg}" alt="サンプル画像">
上記のコードでは、/images/sample.jpgに画像のパスが指定されます。@{}はコンテキストパスを解決するための構文です。
画像がサーバーのstatic/images/ディレクトリに配置されている場合、正しくリンクが生成されます。
3. 動的なURLや変数をth:srcで指定する
th:srcでは、変数や動的なURLを設定することも可能です。以下の例を見てみましょう。
<img th:src="@{'/images/' + ${imageName}}" alt="動的画像">
ここでは、${imageName}が動的に設定される画像名に置き換えられます。たとえば、imageNameがexample.pngなら、リンクは/images/example.pngになります。
4. th:srcをCSSやJavaScriptで活用する
th:srcは画像だけでなく、CSSやJavaScriptファイルにも使用できます。
以下はCSSファイルを指定する例です。
<link rel="stylesheet" th:href="@{/css/style.css}">
JavaScriptファイルを指定する場合：
<script th:src="@{/js/script.js}"></script>
これにより、動的にCSSやJavaScriptのパスを指定し、管理しやすくなります。
5. th:srcの実行結果
それでは、上記のコードを実際に使用した場合の出力結果を確認しましょう。
<img src="/images/sample.jpg" alt="サンプル画像">
<script src="/js/script.js"></script>
<link rel="stylesheet" href="/css/style.css">
6. th:srcのポイント整理
th:srcは、Thymeleafで画像やJavaScriptなどの外部ファイルを読み込むときにとても便利な仕組みです。
HTMLだけで書くとパスの指定がずれて表示されないことがありますが、th:srcを使うと
アプリの動作環境に合わせて自動でパスが調整されるため、初心者でも安心して使えます。
また、画像のファイル名を変更したり、サーバー側でパスを切り替えたいときにも柔軟に対応できます。 実際のコードを見ながら、どんな場面で役立つのかイメージしてみましょう。
▼ 小さなサンプルで確認
<!-- 画像の表示 -->
<img th:src="@{/images/logo.png}" alt="ロゴ">
<!-- JavaScriptファイルの読み込み -->
<script th:src="@{/js/menu.js}"></script>
もしアプリを開発中のパソコンから本番サーバーに移動したとしても、URLが自動で書き換わるため、 ファイルを移動したり修正する必要はありません。 「場所が変わったら動かなくなる」というよくあるトラブルを防げるのが大きなメリットです。
さらに、ファイル名を動的に変更したい場合は変数と組み合わせることもできます。 たとえば、季節ごとに画像を切り替えるようなサイトでも、毎回HTMLを書き換えずに済みます。
<img th:src="@{'/images/' + ${seasonImage}}" alt="季節の画像">
コントローラからseasonImageに「spring.png」や「winter.png」を渡すだけで自動で表示が切り替わります。
初心者でも直感的に使える仕組みなので、画面作りがぐっと楽になります。
最後に整理しておきましょう。
th:srcで画像やスクリプトのパスを自動補完できる。- 開発環境と本番環境でパスが違っても自動で調整される。
- 変数を使えばファイル名の切り替えや動的処理も簡単。
まずは1つ画像を表示するところから試してみると理解しやすく、 「HTMLのパスが通らない」という悩みから解放されます。
まとめ
今回の記事では、Thymeleafのth:src属性について学びました。th:srcは画像やCSS、JavaScriptなどのリソースパスを動的に管理するために非常に便利な機能です。具体的な使い方や実行例を交えながら、その効果的な利用方法を理解できたと思います。
特に、@{}構文を使ったパス指定や変数を利用した動的なパス生成は、テンプレートエンジンとしてのThymeleafの強みを活かした使い方でした。また、CSSやJavaScriptの管理にも利用できる点で、効率的なフロントエンド開発が可能になります。
th:srcの基本を押さえることで、Thymeleafを使った開発がよりスムーズになります。これらの知識を実践的に活用していきましょう。
<img th:src="@{/images/logo.png}" alt="ロゴ画像">
<link rel="stylesheet" th:href="@{/css/main.css}">
<script th:src="@{/js/app.js}"></script>
上記のコード例を参考に、自分のプロジェクトで試してみてください。
生徒
「今日はth:srcについて詳しく学べてよかったです！画像だけでなく、CSSやJavaScriptにも使えるんですね。」
先生
「そうですね。th:srcを正しく使うことで、リソース管理がとても簡単になりますよ。忘れずに、@{}構文を活用してくださいね。」
生徒
「変数で動的なパスを生成する方法も便利だと思いました。これからのプロジェクトで活用してみます！」
先生
「ぜひ試してみてください！何かわからないことがあれば、いつでも質問してくださいね。」
この記事を読んだ人からの質問
