HTMLファイルをブラウザで開いたときに画像が表示されません。

前提・実現したいこと

Visual Studio Codeで作成したHTMLファイルをブラウザで開いたときに画像が表示されません。

どうしたら画像を表示できるか、ご教示お願いいたします。

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

エラーメッセージ

該当のソースコード

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Peinture Excellencepro</title>
<link rel="stylesheet" href="excellenceprostyle.css">
</head>

<body>
<header>
    <img src="images/logoexcellencepro2020.png" alt="excellenceprologo">
    <div class="navigationBox">
    <ul class="navigationList">
        <li>Services & Portfolios</li>
        <li>About us</li>
        <li>FAQ</li>
    </ul>
    </div>
    <p>FREE ESTIMATION : </p>   
</header>

<div class="heroSection">
    <img src="images/backgroundimg.jpg" alt="herophoto">
   
</div>
</body>
</html>

試したこと

ファイルの階層は、htmlとcssが保存している場所に、画像用フォルダ「images」もあります。画像もご参照ください。
効かないと分かりながらも、一応、src内の「/images」を外して、<img src="backgroundimg.jpg" alt="herophoto">などとも打ってみました。

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

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

m.ts10806

2020/05/27 21:03

コードは画像ではなくテキストベースで提示してください。でないとこちらで再現確認できません。各ファイルの位置関係が分かる情報も提示してください

gentaro

2020/05/27 21:31

画像を貼るならVS Codeのエクスプローラの部分も貼らないと、画像ファイルの相対位置が正しいのかどうか回答者には判断できない。

m.ts10806

2020/05/27 21:38

画像観た限りだと画像のところよりcssが正しくリンクされてない方が先に目につきますね

m.ts10806

2020/05/27 22:42

下記、様々な解釈が可能です。事実のみ確実に伝えるように調整してください。階層が見える図、画面キャプチャなど。 >ファイルの階層は、htmlとcssが保存している場所に、画像用フォルダ「images」もありますので

dit.

2020/05/27 23:46

念のため<img src="./images/backgroundimg.jpg" alt="herophoto">としても変わらないか試してみてください。他の方も指摘してますが、画像とHTMLの位置関係がわかるようなキャプチャを提示することはできますか？

raychel

2020/05/28 18:50

m.ts10806さん、gentaroさん、dit.さん、　画像フォルダの場所について説明が不足しておりまして、申し訳ありません。フォルダの場所のスクリーンショットを追記しましたので、ご確認いただきますようお願いいたします。また、dit.さんにお教えいただきました、以下コードを入力しましたが、依然画像が表示されない状況であります。せっかくアドバイスいただきましたところ恐縮です。。 <img src="./images/backgroundimg.jpg" alt="herophoto">

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

回答3件

自己解決

表示したい画像を保存してある images フォルダや、実際に編集している editor が入っているフォルダ(画像上でのフォルダ名"CODING")を、Visual Studio 上で開いていなかったことが原因でした。
こうして解決に至りましたのも、皆さまからあらゆる解決策をいただいた上で、それらを試し、画像フォルダの保存場所や、タイプミスが原因ではないと、一つずつ確認していけたおかげです。
貴重なお時間を、ありがとうございました。また、初歩的なミスで皆さまのお時間をとってしまい申し訳ありませんでした。

投稿2020/05/28 19:38

raychel

総合スコア2

Crhomeのデベロッパーツールで画像リンクが正しいか？確認してみてください。
参考サイト
https://www.buildinsider.net/web/chromedevtools/01

HTMLのファイルの位置と画像の位置関係をチャント把握しているか？どうか？が重要になってきます。
参考サイト
https://webliker.info/78726/

投稿2020/05/27 23:35

AMK

総合スコア765

まずは、原因の切り分けをすると良いと思われます。

該当タグ部分を以下のような、パスが正確に分かるもので画像が表示されるかを確認します。

html
1<img src="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/ba1960c754ea18046f88a76c024d012a.png" alt="excellenceprologo">

もしくは、

html
1<img src="backgroundimg.jpg" alt="herophoto">

とした上で、htmlとcssが保存している場所に"backgroundimg.jpg"を配置して表示します。
これらで表示できなければ、cssやbrowserに原因があると思われます。

表示できるのであれば、ファイル名やパス名、画像の内容に原因があると思われます。

投稿2020/05/27 22:30

ToyoshimaHi

総合スコア130

raychel

2020/05/28 18:43

ご回答ありがとうございます。1 つ目の、パスが正確に分かる画像だと表示され、一方で 2 つ目のコードだと表示されませんでした。ですので、ファイル名やパス名、画像の内容に原因があるかと思われ、ファイル名とパス名はコピー&ペーストで入力しましたので、画像の内容にあるのかもしれません。ご回答ありがとうございました。原因が絞れて助かりました。