自PCフォルダから画像をhtmlに取り込む方法が分かりません

Question

自PCフォルダから画像をhtmlに取り込む方法

初めて質問させていただきます。よろしくお願い致します。

＜実現したいこと＞
・自PCにダウンロードをした画像を、html（<img src="〇〇〇">）に取り込み、Live severに反映させたい

＜状況＞
現在、「VS code」と、拡張ツールである「Live server」を使って、html&cssのコーディングをしています。
それだけならきちんと反映されているのですが、<img src="〇〇〇">タグを使って、画像を挿入しようとしたとき、〇〇〇の中をどのように記述す
れば、PCフォルダ内から取り込めるのかが、分からなくて困っています。

VSCode内には、「index.html」　と、「stylesheet.css」の二つのファイルを作成しています。

<div class="top-image">
    <img src="〇〇〇">      
</div>

＜試したこと＞
画像の種類に合わせ、ファイル名に拡張子をつけて、それを〇〇〇に張ったが、ダメでした。

例）png画像ファイルは、bluesky.png に、jpeg画像は、yellow-stone.jpeg　のように、ファイル名を変更し、

  <div class="top-image">
      <img src="bluesky.png">
  </div>

のようにしましたが、反映されず。。。

また、「vs code」内で、別途、取り込む作業が必要なのでしょうか？

あまりに初歩的過ぎるのか、逆に解決策が見当たりません。。。

お読み頂きありがとうざいます。

Answer 1

index.htmlがある同じ場所にその画像ファイルをコピーしてみればどうでしょうか

Comments

[moyamoyan]

解決しました！

仰る通り、コピーして貼り付けをしました。

すると、VScodeの同一フォルダ内に、htmlやCSSと並列して、画像を収納したファイルが現れました。
そのファイルのパスをコピーしたらダメでしたが、相対パスをコピーして貼り付けたら、きちんと反映されました。

ありがとうございました(^^)/