フォルダーのパスが見つからない

Question

HTML上で画像を表示したく、HTML上でフォルダーパスを指定したのですが、うまく表示されません。
かれこれ1時間ほど試しましたが表示されないのでこちらにて質問致しました。

フォルダ構造
master_portfolio(Desktop直下に在る)
|---blog---template--blogindex.html (ここにgoldwave.pngを表示させたい)
|---media---image---goldwave.png

blogindex.html 上で記載したコード

<div style="background-image: url('/media/image/goldwave.png');">
 <p>aaa</p>
</div>

しかし何も表示されません。。
お分かりの方アドバイス頂ければ幸いです。

Answer 1

HTMLファイルがあるtemplateディレクトリ(フォルダー)から見ると、master_portfolioフォルダーは2つ上(相対パスで../..)にありますから、そこからまたmediaフォルダー→imageフォルダーと辿る必要があります。つまり、相対パスの指定は、../../media/image/goldwave.pngになります。

追加分:
確認用のdiv要素にp要素がひとつしかないので、div要素の背景が見えていません。

<div style="padding: 4em 0; background-image: url('../../media/image/goldwave.jpg');">

のようにして、divにパディングを設定すると、p要素の上下にできたdiv要素のパディング部分に背景画像が表示されるはずです。
さらに、

<p style="background-color: transparent;">aaa</p>

とでもしてやれば、p要素の背景にも背景画像が出ます。
実際には、CSSの側でdiv * { background-color: transparent; }みたいなのを書くことになるでしょう。

Comments

[trey_0329]

ご回答ありがとうございます。
上記の../../media/image/goldwave.pngも試してみたのですが、何も表示されません。

ちなみに、全体のPathは下記の通りです。
C:/Users/nyakkoki3/Desktop/master_portfolio/media/images
しかし同HTML上で
<img class="" src="/media/images/goldwave.png" >
とすると普通に表示されます。
何か他に問題ありますでしょうか？

[Daregada]

表示はどのように行っていますか。ローカルサーバーを使っているとか。HTMLファイルをダブルクリックしてブラウザーを開くとどうなるか、など。

[trey_0329]

ローカルサーバーを使っています

[Daregada]

試しに、ローカルサーバーを使わずに、このHTMLファイルをエクスプローラー/Finderなどからダブルクリックする方法でブラウザーに表示させてみてください。

[trey_0329]

そうすると、<img class="" src="/media/images/goldwave.png" >で表示されていた画像は何も表示されず、同時に<div style="background-image: url('../../media/image/goldwave.png');">も表示されません。
ちなみにバックエンドはDjangoを使っております。

[Daregada]

ローカルサーバー経由でなければ/media/...は表示されないのは当然。

まずは、goldwave.pngを、「HTMLと同じディレクトリ」においてみましょう。
src="goldwave.png"と指定したimgや、url('goldwave.png')と指定したdivに画像が表示されますか。ローカルサーバーを使った場合と使わない場合で確認してみましょう。

[trey_0329]

献身的にご協力頂き誠にありがとうございます。
goldwave.pngを、「HTMLと同じディレクトリ」に置き、<div style="background-image: url('goldwave.png');">に変更、また<img class="" src="goldwave.png">に変更したところ、img srcのほうは無事に表示されました。

[Daregada]

相対パスは最初ので合ってますね。
原因はdiv要素の中にp要素しかなく、divの背景が隠れていることですね。
回答に書いておきます。

[trey_0329]

おっしゃる通りでした。画像のgoldwave.pngの左端が無色たったため、それも影響して見えておらず、表示されていないものだと勘違いしておりました。
ご丁寧にご指導いただき誠にありがとうございます。大変助かりました。

Answer 2

/で始まると絶対パスです。
Webサーバー上でしたらまだそれで良いかもしれませんが、WindowsやMacなどではそれでは大体辿れません(WindowsにおけるCドライブ直下に作ってる訳じゃないですよね)

./として相対パスにしてみてください。

Comments

[trey_0329]

ご回答ありがとうございます。
こちらの方法も試してみましたが表示されませんでした。。
何か他に問題があるかもしれません。。

[m.ts10806]

いずれにしても正しくパスが辿れてないことが原因かと。