HTMLの画像出力に関しての基礎的なな質問です。

Question

デスクトップ上に保存してある画像の表示の仕方がいまいちわかりません。

例えばデスクトップ上にhomeというディレクトリがあり、その中にhome.pngという画像があった場合
image src=“home/home.png”　ではないのですか?
一応image src="Descktop/home/home.png"なども試しましたがうまくいきません。

初歩的な質問ですが回答していただけると嬉しいです！

Comments

[y_waiwai]

コードを提示しないと意味不明です

Answer 1

まず前提として、

「image src=“home/home.png”」は、htmlファイルの場所を起点とした相対パスとして扱われるので、htmlファイルがデスクトップにあるのでなければ目的のファイルを指しません。

「image src="Descktop/home/home.png"」は、デスクトップの絶対パスを意図したものかと思いますが、指定の仕方が相対パスですし、デスクトップの場所は「C:\Users\ユーザー名\Desktop」です。
HTMLでの絶対パスは、プロトコル指定(普通はhttp:)か「/」から始まります。
https://developer.mozilla.org/ja/docs/Learn/Common_questions/What_is_a_URL
こちらの「絶対 URL の例」「相対 URL の例」を参考にしてください。

それを踏まえた上で、
ローカルマシン上のファイルを指定するプロトコルは「file://」です。
これに続けてデスクトップ上のファイルのパス「/C:/Users/ユーザー名/Desktop/ファイル.png」を続けるので、
<img src="file:///C:/Users/ユーザー名/Desktop/ファイル.png">
のような書式になります。

なお、相対パスで指定できるような場所にファイルを置くほうがおすすめです。
インターネット上に公開するためのファイルならそうしないと使用できませんし、ローカルで閲覧するためだけのものでもデスクトップの長いパスをいちいち書くのは面倒だと思います。

Comments

[sn.jr]

分かりやすいご説明ありがとうございます！！

Answer 2

意味不明ですが

---

例えば表示させたいHTMLと画像ファイルが同じフォルダ上にある場合は

hoge.html <-ここの記述方法
hoge.jpg

<img src=./hoge.jpg>

---

表示させたいHTMLと同じフォルダ上にABCというフォルダがあってその中に画像がある場合

hoge.html <-ここの記述方法
ABC - hoge.jpg

<img src=./ABC/hoge.jpg>

Comments

[sn.jr]

なるほど！！ご回答ありがとうございます！

Answer 3

画像などの外部ファイルは絶対パスまたは相対パスで指定する必要があります。
pcのdesktopにあるファイルを指定する場合、絶対パスならC:¥¥から始まるアドレスになり、相対パスの場合はHTMLファイルが置かれている場所に依存します。
HTMLもPNGも同じフォルダになるなら、./a.pngのような指定で呼び出せます。
以下などのページもご参照ください。
パスの指定方法

Comments

[sn.jr]

ご回答ありがとうございます！参照してみます！