Thymeleafのth:srcの使い方を完全ガイド！初心者でもわかる画像やリソース設定

1. th:srcとは？

1. th:srcとは？

Thymeleafのth:srcは、HTMLの<img>タグや<script>タグのsrc属性をサーバーサイドから動的に指定するための属性です。th:hrefがリンクに使われるのに対し、th:srcは画像や外部リソースに使われます。

例えば、動的な画像ファイルのURLやCSSファイルのパスを指定したいときに役立ちます。

2. th:srcの基本的な使い方

2. th:srcの基本的な使い方

th:srcの基本的な使い方は次のとおりです。画像のパスを動的に指定する例を見てみましょう。

<img th:src="@{/images/sample.jpg}" alt="サンプル画像">

上記のコードでは、/images/sample.jpgに画像のパスが指定されます。@{}はコンテキストパスを解決するための構文です。

画像がサーバーのstatic/images/ディレクトリに配置されている場合、正しくリンクが生成されます。

3. 動的なURLや変数をth:srcで指定する

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の実行結果

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のポイント整理

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>

さらに、ファイル名を動的に変更したい場合は変数と組み合わせることもできます。 たとえば、季節ごとに画像を切り替えるようなサイトでも、毎回HTMLを書き換えずに済みます。

<img th:src="@{'/images/' + ${seasonImage}}" alt="季節の画像">

最後に整理しておきましょう。

• 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>
    

上記のコード例を参考に、自分のプロジェクトで試してみてください。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

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が読み込めないトラブルを防ぐことができます。