急に画像が表示できなくなりました

前提・実現したいこと

初心者です。HTMLでドットインストールの「はじめてのHTML」を参照しながら簡単なポートフォリオサイトを作っていたのですがVScodeの言語を日本語にしたとき、あるいはhtmlのファイルを閉じてしまったときに何か変なボタンを押してしまったのか、画像が全て読み込まれなくなってしまいました。

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

Failed to load resource: net::ERR_FILE_NOT_FOUND

エラーメッセージ
Failed to load resource: net::ERR_FILE_NOT_FOUND

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

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>太郎のポートフォリオサイト</title> <link rel="icon" href="favicon.ico"> <meta name="description" content="太郎のポートフォリオサイトです。"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header> <img src="taro.png" width="120" height="120" alt="太郎のアイコンです"> <h1>山田太郎</h1> <p>UI/UXデザイナー見習いです</p> <ul> <li> <a href="https://dotinstall.com" target="_blank"> <img src="blog.png" width="20" height="20" alt="ブログサイトへのリンク画像です"> </a> </li> <li> <a href="https://dotinstall.com" target="_blank"> <img src="photos.png" width="20" height="20" alt="ブログサイトへのリンク画像です"> </a> </li> </ul> </header> <section> <h1>WORKS</h1>

<section>
  <img src="work1.png" width="400" height="260" alt="勇者ゲームの紹介画像">
  <h1>勇者ゲーム</h1>
  <P>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</P>
</section>

<section>
  <img src="work2.png" width="400" height="260" alt="宝探しゲームの紹介画像">
  <h1>宝探しゲーム</h1>
  <P>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</P>
</section>

<section>
  <img src="work3.png" width="400" height="260" alt="神経衰弱の紹介画像">
  <h1>神経衰弱</h1>
  <P>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</P>
</section>

</section> <footer> <p>(c) dotinstall.com</p> </footer> </body> </html>

m.ts10806

2021/01/14 00:10

このままでは「パスが違うかファイルがないんでしょう」くらいのエラー通りのことしか答えようが無いので、実際のコードと、ファイル同士の位置関係がわかる情報（プロジェクトエクスプローラの画面キャプチャとか）をご提示ください。あと、できれば動作確認しているURLも。

Mai.O

2021/01/14 00:27

お早目の回答助かります。ありがとうございます。コードを貼ってみたのですがこれでよろしいでしょうか。右も左も分からない状態ですみません…。

行動規範の内容に同意します

回答1件

ベストアンサー

ファイルが存在しないってエラーなので、
ファイルがないか、ファイルが探せないか、でしょうね

投稿2021/01/14 00:08

y_waiwai

総合スコア88038

Mai.O

2021/01/14 00:20

お早目の回答助かります。ありがとうございます。前まで存在していて普通に開けていたはずなのですが何が起こったのでしょうか…。

y_waiwai

2021/01/14 00:22

ここからはあなたのやったことは見えません。どこになにを置いて、どういうコードを書いたのか全て提示しましょう

Mai.O

2021/01/14 00:28

ありがとうございます。コードを貼ってみました。これで全て提示できたことになっておりますでしょうか…？

y_waiwai

2021/01/14 00:32

そのhtmlファイルをVSCodeで開かないで、直接htmlファイルをダブルクリックして表示させてみたらどうなりますか？

Mai.O

2021/01/14 00:37

はい、エクスププローラーの方からファイルを表示させてみましたが、状況は変わりませんでした。画像は表示されずにAltで指定したコメントだけが表示されている状態です…。

y_waiwai

2021/01/14 00:39

コードをみるとそのhtmlファイルと同じ場所の画像ファイルを参照するようになっています。画像ファイルはどこにあるでしょうか

Mai.O

2021/01/14 00:49

今開いているhtmlファイルの名称が「index.html」なのですが、「index.html」は「basic_html_v5」というファイルに入れてあります。画像ファイルも同様に「basic_html_v5」に入れてあり、さらにその中の「MyPortfolio」→「img」の中に入っています。以前までは先ほどのコードで表示できていたのですが…。

y_waiwai

2021/01/14 00:54

<img src="taro.png" ... を <img src="MyPortfolio/img/taro.png" ... にかえてみれば。

Mai.O

2021/01/14 01:06

おお！！表示できました！！ありがとうございます！質問の方法すらよくわかっておらずお手間をかけさせてしまい申し訳ないです。非常に助かりました。ありがとうございました！

y_waiwai

2021/01/14 01:26

相対パス、絶対パス、ってのを調べてみよう。相対パスは、ファイルを指定するときに、自分の場所からたどっていって指定します

行動規範の内容に同意します