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

2019/10/5 2021/11/25

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

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

参考になるとよいです。

Contents

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上です。

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

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

おすすめの関連記事