VScode 相対パスエラーの解決

前提・実現したいこと

VScodeを用いて、HTMLテキスト内に相対パスで指定した画像の貼り付けを行いたいです。

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

下記のようにpngファイルを相対パスで指定を行なっていますが、ブラウザで開くとconsoleでファイルが見つからないとエラーが表示されてしまいます。

<img src="../img/earth.png" class="card-img-top" alt="...">

GET http://12　index.html:26 
7.0.0.1:5500/img/earth.png 404 (Not Found)

パスの状況

現在は「Bootsstrap」フォルダ内の「index.html」で作業しています。
貼り付けしたい対象の画像は現在のディレクトリから１階層上の「img」フォルダ内に位置しています。

試したこと

対象の画像を「Bootsstrap」フォルダ内へ移動して相対パスを指定するとエラーは無くなりました。
また、対象の画像を「Bootsstrap」フォルダと同じ階層である「html.lesson」フォルダ内へ移動して、相対パスを指定しても、エラーは無くなりました。

storm3

2020/04/21 01:46

>GET http://12　index.html:26 >7.0.0.1:5500/img/earth.png 404 (Not Found) これだけ見ると、ローカルでindex.htmlを直接ブラウザでみてるわけでわなく、サーバ（またはローカルで起動したサーバ）経由でみているようですので、VSCode上のパスがあっていてもサーバ配置時にindex.htmlの配置場所が変わっている。imgフォルダにアクセス権限がないなど考えられます。提示された画像では、パスの指定に間違いはなさそうなので、他に思いつく情報があると回答が得られやすいと思います。

hoshi-takanori

2020/04/21 02:34

Live Server をお使いだと思いますが、VSCode で Bootsstrap フォルダを開いてその中の index.html を Live Server で表示すると、http://127.0.0.1:5500/index.html として開かれますが、この状態だと Bootsstrap より上のフォルダの内容 (img も含め) は見れませんので、VSCode でその上のフォルダ (html.lesson) を開いた状態で Bootsstrap/index.html を Live Server で開けば、img にもアクセスできるようになるはずです。