【画像が表示されない】htmlファイルに<img src="画像名.png" alt="テスト">と記述してます

Question

実現したいこと

ブラウザに画像を表示させたいです。
※ローカルサーバーで実施しています
※エディタはVScodeを使っています

発生している問題・分からないこと

画像が表示されないです。
原因は不明です。

該当のソースコード

<img src="test.png" alt="テスト">

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

コマンド実行ディレクトリに対象の画像ファイルはあります。
タイプミスもしていません。

補足

他に何か考えられる原因がございましたら、ご教授いただけますと幸いです。
よろしくお願いいたします。

###追記

Comments

[meg_]

エラーは何か出ていませんか？

[narururu]

ご回答ありがとうございますmegさん☺

デベロッパーモードで確認したところエラーが出力されてました。
確認していなかったです。。
エラーは下記です。
Failed to load resource: the server ○○○○.png:1 responded with a status of 404 (Not Found)

[otn]

> コマンド実行ディレクトリに対象の画像ファイルはあります。
「コマンド実行ディレクトリ」とは何のことを言ってますか？

> <img src="test.png" alt="テスト">
だと、これを書いたHTMLと同一階層（隣）にあるtest.pngを表示しようとします。
（baseタグで別の場所を指定していない限り）
404ということはそこにファイルが無いと言うことですね。

[narururu]

ご回答ありがとうございます。otnさん☺

確認しましたが、画像ファイルは同一階層にあります。
おかしいなあ

もしかして、localhost環境では画像は表示されないのでしょうか。

[otn]

「responded with a status of 404 (Not Found)」
「test.pngこのタグを書いたHTMLと同一階層（隣）にある」
「タイプミスもしていません。」
のどれかは間違っています。
あと、可能性としては、
・baseタグで別の場所を指定している
・httpサーバーの設定で意図的にエラーになるようにしている
というのもありますが、こっちは意図的な話なので、違うでしょうね。

URLのhtmlファイル名をpngファイル名に書き換えて、ブラウザのアドレスバーに書くとどうなりますか？

[narururu]

うう、いくら調べてもわからないよ。。。
何度も確認しましたが、エラー表記やファイルの格納場所、タイポどれも間違いはないです。。

>URLのhtmlファイル名をpngファイル名に書き換えて、ブラウザのアドレスバーに書くとどうなりますか？
すいません。よくわからないのですが、下記スクリプトを追記しているのは本件に何か影響していますでしょうか？
<script>
const inputs = document.querySelectorAll("input");
inputs.forEach(input => input.addEventListener("blur", (e) =>{
const inputName = e.target.name;
const inputValue = e.target.value;
const baseUrl = "http://localhost:3002/?";
const url = "${baseUrl}${inputName}=${inputValue}";
fetch(url);
}))
</script>

[narururu]

エラー画像を添付しました。お手すきの際にご確認いただけますと幸いです。(エラー表記変化してました)

[narururu]

jsファイルに下記コードを記述したらエラーは消えましたが、画像は表示されない状況です。。
app.get('/test.png', (req, res) => {
console.log(req.query);
res.sendFile(path.join(__dirname, '/index.html'));
});
合ってると思ったのですが、、
何がイケないのだろう。。。

[m.ts10806]

環境情報含めて提示してもらいたいです。質問タグも調整を。
「同じ階層にある」という発言だけでは適切な場所にあるかは誰も分かりませんので
プロジェクトのルートからそれぞれのファイルの位置関係が分かる情報を質問本文に提示してください。

[yambejp]

整理が必要
httpdは立てていますか？ポート80は使えないですか？
公開ディレクトリの設定は間違っていませんか？
アクセスはブラウザからしていますか？

単純にxamppかなにかでhttpdを立てれば解決しそうな話だと思いますが？

[narururu]

ご回答ありがとうございます。m.ts10806さん☺ yambejpさん☺

ベストアンサーに記載されている箇所が原因でした。
使用している言語等の環境を記載しておらず、、大変失礼いたしました。

[m.ts10806]

今からでも追記しておくと、後から見る人の参考になりやすくなると思います（質問タグや環境については検索キーワードにもなります）

[narururu]

質問タグ追記しましたー

Answer 1

jsファイルに下記コードを記述したらエラーは消えましたが、画像は表示されない状況です。。

なんと！
ディレクトリーにファイルを置いておくとそれが表示されるHTTPサーバー(Apacheとか)じゃなくて、
NodeJs + Expressですか。
それでは、「ここにファイルを置けば表示される」という仕組みじゃ無いので、ファイルを置くだけじゃ駄目です。

スクリプトに「このURLパスが来たらこれを返す」を書かないと。

app.get('/test.png', (req, res) => {
  console.log(req.query);
  res.sendFile(path.join(__dirname, '/index.html'));
});

がそれに該当しますが、これは/test.pngに対してindex.htmlの中味を返しているので、画像が表示されるはずありません。'/index.html'⇒'/test.png'

・自分が何をやっているかを、まず、Expressの入門書なり、入門サイトで把握しましょう。
・意味を理解できないコードを書かないようにしましょう。
（上記コードであれば、各関数の意味をググれば理解できるはずです）

Comments

[narururu]

ご指摘の通り修正しましたら、表示されました！
本当にありがとうございました！
とても勉強になりました！