Thymeleafを使用してHTMLページに画像を追加するにはどうすればよいですか?

php エディタ Xigua は、この記事で Thymeleaf を使用して HTML ページに画像を追加する方法を紹介します。 Thymeleaf は、HTML ページで動的データを使用できるようにする、人気のあるサーバーサイド Java テンプレート エンジンです。画像の追加は Web デザインでは一般的なニーズであり、Thymeleaf はこの目的を達成するためのシンプルかつ強力な機能を提供します。次のコンテンツでは、Thymeleaf タグと式を使用して画像を参照および表示する方法を学習します。初心者でも経験豊富な開発者でも、この記事は HTML ページに画像を簡単に追加するための役立つガイダンスを提供します。

質問内容

私の問題は、thymeleaf ブロックが HTML ページに画像とショートカット アイコンを表示しないことです。

ファイルパスを使用してみました:

リーリー

また、rest API を使用してみました:

リーリー

コントローラー付き:

リーリー

そして、常に画像の代わりに alt が表示されます...

回避策

問題 1: ファイルを正しく読み取る

デフォルト設定を使用する場合、

src/main/resourcesに入力したものはすべてクラスパスにコピーされます。したがって、コード内でsrc/main/resourcesを参照するのではなく、クラスパス自体を参照する必要があります。

ローカルで実行する場合はまだ動作する可能性がありますが、jar ファイルを別の場所で実行するとすぐに完全にクラッシュします。

したがって、理想的にはコントローラーを次のように書き直す必要があります:

リーリー

ファイルからリソースを取得するのは一般的なタスクであるため、実際にバイトを読み取る必要はありません。

bytearrayresourceの代わりにfilesystemresourceを使用できます:リーリー

クラスパスからリソースを取得することは非常に一般的であるため、

classpathresourceクラス:が存在するため、これを短縮することもできます。 リーリー

それだけではありません。通常はクラスパスから Web リソースを提供する必要があるため、スプリング ブートでは、

classpath:static/フォルダーまたはclasspath:public/フォルダー内のすべてがすでにネットワーク上にあります。したがって、通常、イメージは、コントローラ メソッドを必要とせずに、http://localhost:8080/logo.pngですでに利用可能です。

したがって、通常はコントローラー メソッドを完全に削除できます。

質問 2: ファイルを正しく引用する

これで 2 番目の質問になります。現在、

@{/api/v1/logo}または@{src/main/resources/static/logo.png}を使用して画像を参照します。 thymeleaf は@{path/to/file}をコンテキスト依存 URL として解釈するため、コンテキスト パス (存在する場合) を先頭に付加し、ファイルがにあることを期待するだけです。 http://localhost:[サーバーポート]/[コンテキストパス]/path/to/file。

ただし、前に確認したように、画像は

http://localhost:8080/logo.pngで入手できるはずなので、@{/logo.png}を使用する必要があります。 :リーリー

これが機能しない場合は、次のようにします。

ビルド ツールの構成が正しくなく、クラスパスに
• src/main/resourcesが含まれていない可能性があります。
• classpath:static/またはclasspath:public/内で何も自動的に提供しないように Spring Boot を構成している可能性があります。

以上がThymeleafを使用してHTMLページに画像を追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。