web-dev-qa-db-ja.com

thymeleaf springフレームワークのローカルディレクトリから画像を挿入する（Mavenを使用）

このリンクを使用してプロジェクトを開発しました： https://spring.io/guides/gs/serving-web-content/ 上記のプロジェクトを開発するためにmavenを使用しました。

この下に2つのhtmlファイルがあります。 abc.htmlおよびxyz.html。 HTMLページに画像を挿入するために、次のようなURLを使用しました。

<img src="https://example.com/pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px">

しかし、代わりにサーバーにある画像ファイルを使用したいです。 htmlファイルと同じディレクトリにファイルを配置しようとしましたが、動作しませんでした。私はフルパスを与えようとしましたが、役に立ちませんでした。これはubuntu OSです。ここで私を助けてください。基本パスを設定できる場所、または基本的にローカルフォルダから画像を配置する方法はありますか。

htmlspringmaventhymeleaf
12
undefined

標準URL構文 のThymeleafのドキュメントと、具体的にはコンテキスト相対URLパターンとサーバー相対URLパターンを確認してください。

コンテキスト相対URL：

Webアプリケーション内のリソースをリンクする場合は、コンテキスト相対URLを使用する必要があります。これらは、サーバーにインストールされると、Webアプリケーションのルートに関連することになっているURLです。たとえば、myapp.warファイルをTomcatサーバーにデプロイすると、おそらくアプリケーションは http：// localhost：8080/myapp およびとしてアクセス可能になります。 myappはコンテキスト名になります。

JB Nizetとして、webappプロジェクトで個人的にthymeleafを使用したので、次のように動作します。

<img th:src="@{/images/test.png}"/>

test.pngはwebappフォルダー内のプロジェクトルートの下にあります。大体のようにナビゲートされたもの、

Myapp->webapp->images->test.png

例：

<img th:src="@{/resources/images/Picture.png}" />

として出力：

<img src="/resources/image/Picture.png" />

http://localhost:8080/myapp/resources/images/Picture.pngブラウザで、上記の構文が機能するために画像にアクセスできるはずです。そして、リソースフォルダーはおそらくアプリケーションのwebappフォルダーの下にあります。

サーバー相対URL：

サーバー相対URLはコンテキスト相対URLと非常に似ていますが、URLをアプリケーションのコンテキスト内のリソースにリンクすることを想定していないため、同じサーバーの別のコンテキストにリンクできます。

構文：

<img th:src="@{~/billing-app/images/Invoice.png}">

出力として：

<a href="/billing-app/showDetails.htm">

上記の画像は、コンテキストとは異なるアプリケーションからロードされ、アプリケーションがbilling-appはサーバーに存在します。

ソース： Thymeleafドキュメント

28
Lucky

HTTPの仕組みを理解する必要があります。ブラウザがURLのページをロードするとき

http://some.Host/myWebApp/foo/bar.html

hTMLページには

<img src="images/test.png"/>

ブラウザは2番目のHTTPリクエストをサーバーに送信して画像を読み込みます。パスは相対パスであるため、画像のURLはhttp://some.Host/myWebApp/foo/images/test.pngになります。絶対パスは、ページの現在の「ディレクトリ」から構成され、画像の相対パスと連結されることに注意してください。サーバー側JSPまたはthymeleafテンプレートのパスは、ここでは完全に無関係です。重要なのは、ブラウザのアドレスバーに表示されるページのURLです。このURLは、典型的なSpring MVCアプリケーションでは、最初のリクエストが送信されたコントローラーのURLです。

画像のパスが絶対の場合：

<img src="/myWebApp/images/test.png"/>

ブラウザはURL http://some.Host/myWebApp/images/test.pngに2番目のリクエストを送信します。ブラウザはWebサーバーのルートから起動し、絶対パスを連結します。

画像を参照できるようにするには、ページのURLが何であれ、絶対パスが優先され、使いやすいです。

上記の例では、/myWebAppはアプリケーションのコンテキストパスであり、通常、パスにハードコーディングする必要はありません。変更される可能性があるためです。ありがたいことに、 thymeleaf documentation によれば、thymeleafはそれを理解し、コンテキスト相対パスの構文を提供するため、/images/test.pngなどのパスを/myWebApp/images/test.pngに変換します。したがって、画像は次のようになります。

<img th:src="@{/images/test.png}"/>

（thymeleafを使用したことはありませんが、それはドキュメントから推測します）。

したがって、test.pngイメージは、webappのルートの下にあるフォルダーimagesにある必要があります。

7
JB Nizet

インターネットでリンクを取得：

String src = "https://example.com/image.jpg";

HTML：<img th:src="@{${src}}"/>

2
Minato