WEBサイトに画像が表示されない時のチェックポイント【src,拡張子…】

この記事は、WEBサイトの制作をしていて画像のファイルが読み込まれないという時に確認するポイントについて書いています。

すべては網羅できないので、よくあるミスについていくつかあげておきます。

WEBサイトに画像が表示されない時のチェックポイント

チェックするポイントは以下の3つです。

  • 拡張子に間違いがないか
  • HTML要素の書き間違いがないか
  • パスの指定ミスがないか

ではさっそく見ていきましょう。

①拡張子に間違いがないか

簡単なところから確認していきましょう。まずは拡張子が間違っていないか確認してください。

たとえば「JPG」と「jpg」は別ものとして扱われます。画像編集のソフトウェアによってJPGだったりjpgだったりするので意識してみてないと気付かなかったりします( ˙-˙ )

②HTML要素の書き間違いがないか

画像の表示はimg要素を使います。

以下がimgファイルの基本的な書き方です。

<img src="★画像ファイルとパス指定★" width="★横幅★" height="★高さ★" alt="★画像の説明★">

srcやwidthなどの要素の記述ミスはないでしょうか?

間違いがなかった場合は、 HTMLファイルと同じディレクトリに画像を入れて、簡単なパスにして表示されるか確認してみてください。

それでも画像が表示されなければ次いってみましょう。

③ パスの指定ミスがないか

上記の①②でもなければパスの指定ミスがないかしっかりと確認しましょう。

ちなみに僕はパスの最初に「/」ってしてる時あったりします。カレントディレクトリはファイルやディレクトリ名からはじめるか、「./」です。

まとめ

最後にもう一度、WEBサイトに画像が表示されない時の確認ポイントを整理します。

  • 拡張子に間違いがないか
  • HTML要素の書き間違いがないか
  • パスの指定ミスがないか

以上です。

ずっとコード書いてたりするとちょっとしたミスも気づかなくなっちゃったりする時もありますよね。

実際は他にも色々なパターンがあると思いますが、さっと確認できるポイントの紹介でした!