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

質(zhì)問內(nèi)容

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

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

リーリー

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

リーリー

コントローラー付き:

リーリー

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

回避策

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

デフォルト設(shè)定を使用する場合、

src/main/resources に入力したものはすべてクラスパスにコピーされます。したがって、コード內(nèi)で src/main/resources を參照するのではなく、クラスパス自體を參照する必要があります。

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

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

リーリー

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

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

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

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

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

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

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

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

これで 2 番目の質(zhì)問になります?，F(xiàn)在、

@{/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} を使用する必要があります。 : リーリー

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

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

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