Thymeleafのth:srcの使い方を完全ガイド！初心者でもわかる画像やリソース設定
生徒
「Thymeleafで画像やCSSファイルのパスを指定する方法はありますか？」
先生
「はい、Thymeleafではth:srcを使って、HTMLの画像パスやリソースのリンクを簡単に指定できますよ。」
生徒
「th:hrefは知っているんですけど、th:srcも似たような使い方なんですか？」
先生
「そうですね！基本的な考え方は同じですが、画像や外部リソースに対して使うのがth:srcです。それでは、具体的に見ていきましょう！」
1. th:srcとは？
「1. th:srcとは？」の重要ポイントを、初心者の方にも分かりやすく簡潔に解説します。
Thymeleafのth:srcは、HTMLの<img>タグや<script>タグのsrc属性をサーバーサイドから動的に指定するための属性です。th:hrefがリンクに使われるのに対し、th:srcは画像や外部リソースに使われます。
例えば、動的な画像ファイルのURLやCSSファイルのパスを指定したいときに役立ちます。
2. th:srcの基本的な使い方
いちばんシンプルな使い方は、画像タグのsrcをth:srcに置き換えて
@{}でパスを書く方法です。@{}はアプリのコンテキストパスを自動解決するため、
開発環境でも本番環境でも同じ記述で正しいURLに展開されます。
▼ まずは最小サンプル
<!-- templates/index.html など -->
<img th:src="@{/images/sample.jpg}" alt="サンプル画像">
たとえばアプリが/直下で動く場合はsrc="/images/sample.jpg"に、
/myappで動く場合はsrc="/myapp/images/sample.jpg"に自動変換されます。
画像は通常、src/main/resources/static/images/に置きます。
つまりファイルの実体がstatic/images/sample.jpgなら、上記1行で正しく表示されます。
HTMLに絶対パスを書かなくてよいので、配置を変えても壊れにくいのが利点です。
▼ 「素のsrc」との違い（比較）
<!-- 素のHTML: 環境が変わるとパスずれしやすい -->
<img src="/images/logo.png" alt="ロゴ">
<!-- Thymeleaf: 環境に合わせて自動調整 -->
<img th:src="@{/images/logo.png}" alt="ロゴ">
ルートパスやリバースプロキシの有無に影響されにくく、初心者でも安全にパス指定できます。
なお、altには画像の内容を短く書いておくと、読み上げや表示失敗時にも親切です。
ここまでが「固定ファイルを表示する」ための基本です。まずは画像1枚から試して、表示されるか確認しましょう。
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で活用する
「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を正しく使うことで、リソース管理がとても簡単になりますよ。忘れずに、@{}構文を活用してくださいね。」
生徒
「変数で動的なパスを生成する方法も便利だと思いました。これからのプロジェクトで活用してみます！」
先生
「ぜひ試してみてください！何かわからないことがあれば、いつでも質問してくださいね。」
この記事を読んだ人からの質問
プログラミング初心者からのよくある疑問／質問を解決します
Thymeleafのth:srcとth:hrefの違いは何ですか？
Thymeleafのth:srcは画像、JavaScriptファイル、CSSファイルなどの静的リソースのパスを指定するための属性で、HTMLのimgタグやscriptタグに使われます。一方、th:hrefはリンク先のURLを指定するための属性で、aタグやlinkタグに使用されます。どちらもThymeleafで動的なパスを生成できますが、役割が異なるため使い分けが必要です。Spring BootとThymeleafを組み合わせたWebアプリ開発では頻繁に登場し、特に静的リソースの管理ではth:srcを使うことでパスのずれによる画像やJavaScript、CSSが読み込めないトラブルを防ぐことができます。
Thymeleafのth:srcを使うとき、@{}構文は必ず必要ですか？
はい、基本的には@{}構文を使います。@{}構文はコンテキストパスを解決し、開発環境と本番環境でパスが変わっても自動的に正しいURLを生成してくれます。たとえば同じHTMLコードをローカル環境で動かす場合と本番サーバーにデプロイした場合でルートパスが違っても、th:srcで@{}を使うことでパスの修正が不要になります。Thymeleaf初心者がつまずきやすいポイントですが、@{}構文を習慣的に使うと安心です。
【職業訓練講師が直接指導】
社会人向けThymeleaf入門セミナー｜Java Web画面を自在に操るテンプレートエンジンの極意
Java入門からSpring Boot実務まで。現場で絶賛される「設計の型」を最短距離で習得。
技術記事の内容を、自分の「スキル」へ変える。
職業訓練講師が最短攻略！社会人向けThymeleaf実践。Javaエンジニアのための「プロ基準」画面構築術。
Java Web開発の現場で標準採用されているThymeleaf（タイムリーフ）。本セミナーでは、HTMLの構造を壊さず開発できる「ナチュラルテンプレート」の利点を最大限に引き出し、動的表示とロジックの分離を60分で濃縮習得する、社会人のためのThymeleaf特化型講座です。
60分集中・Thymeleaf画面設計ワークショップ
【つくるもの】
「実務型データ一覧・更新画面」を構築。リストの反復表示（th:each）、条件判定（th:if）、フォームとの双方向データバインド（th:object）など、商用開発で毎日使うコア機能を、スタースクール流の最短距離でマスターします。
【開発環境】
Spring Boot 3.x環境を使用。ブラウザでそのまま確認できるThymeleafの特性を活かし、デザイナーとの協業やデバッグ効率を劇的に高める「プロの画面構築フロー」を職業訓練講師が直接伝授します。
この60分で得られる3つの革新スキル
classの動的切り替えや属性制御を自在に操り、Java入門者でも「読みやすく修正しやすい」HTML構造を維持する技法を習得します。
th:fragmentを駆使し、ヘッダー・フッター・ボタン等を部品化。大規模開発でも一箇所直せば全画面に反映される「スケーラブルな設計」を学びます。
日付の整形やログイン状況に応じた表示切替など、周辺技術と「繋ぐ」ためのThymeleaf特有の記述ルール（#fieldsやsec:authorize等）を短時間で整理します。
※本講座は、Thymeleafを使いこなし「現場で重宝される画面構築力」を手に入れたい社会人向けの「フロント×バックエンド連携講座」です。スタースクールがあなたの即戦力化を全力でリードします。
累計120万PV超の技術メディアが監修。理論の丸暗記ではない、
実務10年PLが実践する「一生モノの設計力」を、60分の濃縮セミナーで伝授します。
