imgタグ 画像が表示されません

Question

前提・実現したいこと

vscodeでのimgの画像表示が２つできません
フォルダの指定がうまくできていないのは、わかっておりますが指定の方法がわかりません
ご教授お願いします

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

エラーメッセージ

該当のソースコード

試したこと

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

ここにより詳細な情報を記載してください。

Answer 1

いま、こういうフォルダ構成になっていると思います。

(大元のフォルダ)
└frontend/
□└index.html

└images/
□└favicon.png
□└logo.svg
□└main-bg.jpg

提示していただいたコードの場合、src="images/logo.svg"で表示できるのは、
index.htmlと同じ階層にimagesフォルダがあり、
imagesフォルダの中に入っているlogo.svgとなります。

いまの構成を見てみると、imagesフォルダはどこに配置されているでしょうか？
index.htmlより1個上の階層にありますよね。
この場合、何も表示されなくなってしまいます。

ここから画像を表示させるようにするには、２つの方法があります。

①imagesフォルダを移動する

imagesフォルダを引っこ抜いて、
frontendフォルダの中にぶちこんでみましょう。
画像の指定が正しいものとなり、表示されるようになります。

(大元のフォルダ)
└frontend/
□└index.html
□└images/
□□└favicon.png
□□└logo.svg
□□└main-bg.jpg

②タグの指定を変更する

index.htmlより1個上の階層にあるファイルを指定するには、
images/logo.svg"の前に../を追加する必要があります。

つまり、こう。

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

一個上の階層をたどるようになり、画像が表示されます。
参考：相対パスについて | HTML5入門編 - ウェブプログラミングポータル

Comments

[takumi378]

ありがとうございます
同じ階層にするには、imagesフォルダごと移動することはできますか？
フォルダの中身だけを移動することは、出来たのですが、imgesフォルダごとをfrontendのフォルダに移動することはできますか？

[Yorrie]

Finder上でimagesフォルダを選択して切り取り(⌘+X)、
frontendフォルダの中に入ってからペースト(⌘+V)とかでいけるんじゃないですかね…
パソコンのショートカットは覚えとくと便利ですよ。

[takumi378]

ありがとうございます

Answer 2

コードが画像で提示されているので手打ちするしかなく、
間違ってるかもしれませんが、

HTMLファイルがあると思われるfrontendフォルダと
画像がいるがあると思われるimagesフォルダ
は同じ階層にあるように見受けられます。

念のためエクスプローラから確認してみてください。

同じ階層なら提示されたコードの記述では正しくパスが辿れていません。
パスは記載されたファイルから辿ってください。
記載を変更したくないのであればフォルダ構成を変更してください。

Comments

[takumi378]

ありがとうございます

[m.ts10806]

もし、分からない単語や表現があるのなら今確認しておいた方が良いです。
話が通じないとアドバイスも無駄になります。

Answer 3

「../」を使えばOKだと思います。

<img src="../images/logo.svg">
<img src="../images/main-bg.jpg">

Comments

[takumi378]

ご回答ありがとうございます