HTML画像のpathに関して

Question

#HTMLとCSSの画像のpathに関して
記載しているようなディレクトリで画像を表示させたいのですが
HTMLのimgとcssのbackground-imageがうまく表示されません。
おそらくPathが問題だとは思うのですが、
どのように記述するべきかがわかっていません。

なにかアドバイスをいただけると幸いです。
よろしくお願いいたします。

CSSとjsに関しては問題なく読み込めています。

----------追記-------------
以下のように直してみましたがうまくいってはいません。
##HTML<img>

<img src="../../static/image/penlogo.svg" th:src="@{../../static/image/penlogo.svg}" alt="tutors-logo"/>

##CSS　background-image

 background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0, 0, 0, 0.3)),url("../image/balloon.jpg");

Comments

[m.ts10806]

cssそこだけでは何に対して指定しているのかわかりません。
他者がコピペで再現できる情報をご提示ください。
またThymeleaf関係ないところで出来そうに思うので、もっと簡単な、静的HTMLで試した方が良いのでは？

[encho]

簡単なHTMLで試してできていて、
thymeleafで表示がされなかったので質問をしています。

[m.ts10806]

その旨追記願います。
「問題なく読み込めている」の確認方法もあわせて追記願いたいですね。
あとcssもhtmlもあまり切り取りすぎないように提示願います。
これだけだと何に当てようとしてるのかわかりません。

Answer 1

仮説のみ。

対象の記述のあるcssが「css/style.css」だとしたら
image/balloon.jpgという記述だと、
css/image/balloon.jpgを見に行っています。
提示の構成だと../image/balloon.jpgでしょうか。

静的HTMLで試すときも同じ階層で試すべきと思います。

Comments

[m.ts10806]

あとはキャッシュ。

Answer 2

templates/login/index.htmlというHTMLファイル内の<img>で、
static/image/penlogo.svgを読み込むなら以下のような記述です。

<img src="../../static/image/penlogo.svg" alt="logo">

static/css/style.cssというCSSファイル内の「background-image」から、
static/image/balloon.jpgを読み込むなら以下のような記述です。

background-image: url("../image/balloon.jpg");

../は1つ上のフォルダを意味します。

Comments

[encho]

アドバイスをいただいた通り直してはみましたが、
画像が表示されていません。thymeleafの問題なのかもしれません。

[new1ro]

「src」ディレクトリから「public」「assets」「asset」などのディレクトリにコンパイルしているなら、そのコンパイル先のファイルからの相対パスを書く必要があります。

もしくは絶対パスで指定してもいいかもしれません。

[encho]

アドバイスありがとうございました。
無事解決ができました。

Answer 3

いくつかの問題がありました。
まずsecurityで静的リソースへのアクセスを許可できていなかったこと、
またthymeleafではクラスパスがstaticにあるのでそこからのパスを書くべきでした。

th:src="@{image/penlogo.svg}"

background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0, 0, 0, 0.3)),url("../images/balloon.jpg");