画像のパス指定について

Question

やりたいこと

htmlにimgタグを書いて画像を表示させたい

現状

以下のフォルダ構成、ソースコードで表示されない（キャンドル）と表示される。

【images】...画像が格納されているフォルダ
【index.html】...表示するhtmlファイル

<img src="../static/images/image001.jpg" alt="キャンドル">

自分の認識としてはindex.htmlから1つ階層を上がってstaticからのパスを指定しているのですが間違っているでしょうか？
単純な質問で恐縮ですがご教授お願い致します。

言語：java(jdk1.8.0_191)
フレームワーク：spring boot(2.1.0.RELEASE)
IDE：STS

Answer 1

SpringBootで、Thymeleafからstaticに配置されたリソースを参照する方法は、例えば static内に image/capies.jpg ファイルがある場合は、

<img th:src="@{/image/capies.jpg}">

です。

静的ファイルへの参照については、

SpringBoot static

で検索すると、関連する情報がすぐに見つかるでしょう。

Comments

[sanezane]

提示されたソースを参考に修正したところ期待の出力を得ることができました。ありがとうございます。

Answer 2

テンプレートからの相対位置は合っていると思いますが
あくまでテンプレートしてつかわるのであれば、
そこからの相対位置はあまり意味がないのでは？

Answer 3

 src=""

いきなり間違っているように見えますが、誤記なら修正してください

Comments

[sanezane]

すみません誤記です。開発環境よりコピペしてきましたので今度は間違いないです。

Answer 4

今作っているのが普通のノーマルなHTML/CSSであれば、/templates/index.htmlから/static/images/image001.jpgまでの相対パス指定は正しいです。

が、おそらくフォルダ構造からしてこれはノーマルなHTML/CSS環境ではないですよね？
javaの何かプログラムかフレームワークの環境で、
/templates/の中にあるHTMLをテンプレートにして、外部からデータを取得して動的に
HTMLを生成し、どこか別の場所に出力する仕組みになっているはずです。
それがどこに出力されるのか、提示されている情報からは分かりませんので
具体的にパスをどう書けばよいのかまでは教えられませんが、

「最終的に生成されたHTMLファイルが出力される場所」から「そのHTMLが呼び出す画像の格納された場所」までのパスを記述してやれば良いと思います。
※相対パスでもルートバスでもどちらでもお好みで。

Comments

[sanezane]

ありがとうございます！
おっしゃっている内容の理解はしました。今から調査しますのでまた相談させていただくかもしれません。そのときはご意見をどうぞ宜しくお願い致します。

[aKusano]

あ、私ただのHTMLコーダーなので、HTMLとCSSのことは詳しいですけど
javaとかjavaのフレームワークとかはサッパリ分からないので、
環境依存の問題だった場合は役立たずですw ご了承ください。