相対パスで画像表示ができない

Question

前提・実現したいこと

HTMLとCSSを用いてWebページを作っています。
現在はヘッダーのロゴとメニュー欄を作っている段階にあります。

発生している問題・エラーメッセージ

相対パスでロゴ画像を表示したいのですが、表示されません。

該当のソースコード

<header>
    <div class="logo">
      <img src="images/logo.png" alt="SNAPPERS">
    </div>
      <ul class="menu">
        <li><a href="#">portfolio</a></li>
        <li><a href="#">about</a></li>
        <li><a href="#">contact</a></li>
      </ul>
  </header>

header {
  width: 1300px;
  height: 100px;
  margin: 0 auto; 
}

.logo {
  float: left;
  margin-top: 50px;
}

試したこと

対象ファイルの位置関係を間違えて記述していると考え、<img src="logo.png" alt="SNAPPERS">や<img src="IMAGES/images/logo.png" alt=""SNAPPERS>など書き直してみましたが、うまくいきませんでした。

おそらく、リンクを記述するページの位置関係を理解できていないから、対象ファイルがどこにあるのかわからない状態なのだと思います。

お時間ありましたら、ご教示お願いいたします。

補足情報（FW/ツールのバージョンなど）

該当する画像(logo.png)は上のimagesフォルダに入っており、htmlコードはOUTLINEという階層をクリックすると表示されます。ご回答を参照するに、そもそもhtmlファイルがエディタの正しい場所にないのではないかと思いました。もし説明の足りない点がございましたら、教えていただけると幸いです。

Answer 1

HTMLと画像ファイルの位置関係がわからないと記述したものが合っているかわかりません。
HTMLをindex.html、画像ファイルをlogo.pngとしていくつかパターンを書いておきます。

---

index.htmlとlogo.pngが同じ階層にある場合

<img src="logo.png">
<!-- または -->
<img src="./logo.png">

---

index.htmlと[images]フォルダが同じ階層にあり、[images]フォルダ内にlogo.pngがある場合

<img src="images/logo.png">
<!-- または -->
<img src="./images/logo.png">

---

[html]フォルダと[images]フォルダが同じ階層にあり、[html]フォルダ内にindex.html、[images]フォルダ内にlogo.pngがある場合

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

---

[html]フォルダと[images]フォルダが同じ階層にあり、[html]フォルダ内にindex.html、[images]フォルダ内の[common]フォルダ内にlogo.pngがある場合

<img src="../images/common/logo.png">

---

あとは大文字小文字を含めファイル名やフォルダ名が間違っていないか確認してください。
imagesだと思っていたフォルダがimageだったとかimgだったとかもよくあります。pngじゃなくてjpgだったとかも。

---

追記1
index.htmlと[IMAGES]フォルダが同じ階層にあり、[IMAGES]フォルダ内の[images]フォルダ内にlogo.pngがある状態です。

---

追記2
Visual Studio Code入れて試してみました。
アウトライン表示ができる機能があったんですね。
画像に示しているところをドラッグすると境界が下げられると思うので、画像ファイル群より下のHTMLファイルが見えそうなところまで下げてみてください。

Comments

[Kindy]

説明不足にも関わらず、丁寧に説明していただきありがとうございます。
ご指摘の通りに訂正しようとしましたが、おそらくコードの記述方法よりも、htmlファイルの位置が正常な場所に置かれていないのではないかと考えています。

htmlファイルとimagesフォルダの位置関係の写真を、質問の方に追加しましたので、そちらの方を参照にしてもらうとありがたいです。

[dit.]

いくつかお尋ねします。
・お使いのエディタは何でしょうか。（あまり関係ないと思いますができればOSも）
・htmlとして保存できていますか。（画像はjpgやpng等の拡張子があるのに、HTML？の方には何もないのが気になりました）
・「画像が表示されない状態」をどのように確認していますか（エディタのプレビューとかHTMLファイルをダブルクリックでブラウザで表示しているとか）
・ブラウザで表示している場合ブラウザの種類は？

この後回答を編集し、Atomというエディタで制作した状態の画像を載せます。
これでindex.htmlを直接ブラウザで開くと画像が表示されています。

[Kindy]

>>>お使いのエディタは何でしょうか。（あまり関係ないと思いますができればOSも）
エディタはVisual Studio Codeで、OSはWindows10です。

>>>htmlとして保存できていますか。（画像はjpgやpng等の拡張子があるのに、HTML？の方には何もないのが気になりました）
htmlとして保存できているのですが、デスクトップに保存されてあります。エディタのフォルダに保存されてはいないので、どうやってエディタ内からでもアクセスできるのか悩んでいます。

>>>「画像が表示されない状態」をどのように確認していますか（エディタのプレビューとかHTMLファイルをダブルクリックでブラウザで表示しているとか）
エディタからhtmlをスライドさせてブラウザ上で表示させています。

>>>ブラウザで表示している場合ブラウザの種類は？
google chromeです

質問に答えている中で、htmlファイルをエディタ内からではなくデスクトップからしか開けないのが問題ではないかと考えました。htmlファイルがエディタ内でどこにもみあたらないため、位置関係がおかしくなっているのではないかと、、

[dit.]

HTMLはデスクトップにあるということですが、画像群はどこにあるのでしょうか？
デスクトップにHTMLがあり、デスクトップに[IMAGES]フォルダがあるわけではないのでしょうか。
HTML（または画像フォルダ）の場所を移動することも視野に入れる必要がありそうです。

[Kindy]

ご提案の通り、HTMLの場所を移動することで無事エディタにも表示されるようになりました。
本当にありがとうございます

Answer 2

このHTMLとimagesディレクトリはどういった位置関係なのでしょうか？
同階層ならimages/logo.pngで動作しますが、一つ上の階層なら../images/logo.pngのように記載する必要がありますが・・・

Comments

[Kindy]

ご回答ありがとうございます。
そうですね、説明不足で申し訳ございません。
位置関係の写真を質問の方に追加変更しましたので、そちらの方を参照してもらうとありがたいです。
どうぞよろしくお願いします