HTML&CSS

HTMLの画像が表示されない時に試すべき7つの解決策

ニャンコ
ニャンコ

画像を表示したいのに、なぜか画面に出てこない～

画像が表示されない原因は様々あります。
ひとつひとつ原因を確認して潰していきましょう。

ワンコ
ワンコ

Webページに画像を表示させることは、視覚的に魅力的なコンテンツを作成する上で非常に重要です。
しかし、画像が表示されないトラブルはよくあります。本記事では、画像が表示されない原因を徹底的に解説し、それぞれに対策を紹介します。

1. 画像パスの設定ミス

最も多い原因は、画像パスが間違っていることです。

意外にパスが間違ってることがちょこちょこあります。
また、jpgやjpeg、pngなどの拡張子が間違ってることもあるので、もう一度確認してみましょう。

ワンコ
ワンコ

主な原因

  • ファイル名や拡張子の間違い（例: .jpg と .jpeg）。
  • パスの指定が相対パスと絶対パスで混乱している。
  • ファイルのディレクトリ構造が変更されている。

解決方法

  • ファイル名と拡張子を確認し、一致させる。
  • パスが正しいかチェックする（例: images/sample.jpg）。
  • ブラウザの「検証ツール」を使ってリンクエラーを特定する。

2. 画像ファイルが存在しない

指定した場所に画像ファイルがない場合、当然表示されません。

こちらもうっかりミスですね。
まさかというところを見落としガチです。
別のフォルダに画像を入れてたりしませんか？

ワンコ
ワンコ

主な原因

  • ファイルがアップロードされていない。
  • ファイルが削除された。
  • サーバーの保存場所が変更された。

解決方法

  1. 指定の場所に画像が存在するか確認。
  2. サーバーに正しい画像をアップロード。
  3. 必要に応じてHTMLのパスを更新。

3. ブラウザ非対応の画像形式

使用した画像形式がブラウザでサポートされていない場合も、画像は表示されません。

画像はjpgやpngなどが一般的です。
webpなどの新しい形式は、<picture>要素などを指定しておくと良いでしょう。

ワンコ
ワンコ

主な原因

  • .tiff や .bmp など古い形式を使用。
  • .webp のような新しい形式が古いブラウザでサポートされていない。

解決方法

  • 一般的な形式（.jpg、.png、.gif）を使用。
  • 必要なら互換性のあるフォールバック形式を提供。

4. CSSの影響で画像が表示されない

CSS設定が原因で、画像が非表示になったり見えなくなったりする場合があります。

CSSの影響で画像が表示されていないかも確認しましょう。

ワンコ
ワンコ

4.1 display: none; の設定

画像に display: none; が指定されている場合、画像は完全に非表示になります。

解決方法

img { display: block; }

4.2 visibility: hidden; の設定

visibility: hidden; は要素を非表示にしますが、DOM上には存在します。

解決方法

img { visibility: visible; }

4.3 透明度が0になっている (opacity: 0;)

画像が透明になり見えなくなります。

解決方法

img { opacity: 1; }

4.4 親要素の影響

親要素に以下のCSSが設定されている場合、画像が見えなくなることがあります。

  • overflow: hidden; により画像が切り取られている。
  • 親要素の幅や高さが0に設定されている。

解決方法

親要素のスタイルを修正します。

.parent { overflow: visible; width: auto; height: auto; }

4.5 z-index の設定ミス

他の要素が画像の上に重なり、画像が隠れていることがあります。

解決方法

img { position: relative; z-index: 10; }

4.6 背景画像の設定ミス

画像が <img> タグではなくCSSの background-image で設定されている場合、以下のミスが原因になります。

  • background-size の設定ミスで画像が縮小されている。
  • background-position の設定で画像が見切れている。

解決方法

element { 
background-image: url('images/sample.jpg'); 
background-size: cover; 
background-position: center; 
}

4.7 メディアクエリによる非表示

レスポンシブ対応のためのメディアクエリが原因で、画像が非表示になっている場合があります。

解決方法

@media (max-width: 768px) { img { display: block; } }

4.8 フィルター (filter) の影響

CSSのフィルター効果で画像が見えなくなっていることがあります。

解決方法

img { filter: none; }

5. キャッシュの問題

ブラウザのキャッシュに古い情報が残っていると、新しい画像が表示されないことがあります。

解決方法

  • キャッシュをクリアする。
  • 強制リロード（Ctrl + F5 または Cmd + Shift + R）を実行する。

6. ファイル権限の問題

サーバー上の画像ファイルに適切な権限が設定されていないと、画像がブロックされることがあります。

解決方法

  • サーバーでファイルのパーミッションを「読み取り可能」に設定。
  • .htaccess ファイルやサーバー設定を確認。

7. CORS（クロスオリジンリソース共有）の問題

他のドメインから画像を取得している場合、CORSポリシーによってブロックされることがあります。

解決方法

  • 同一ドメイン内で画像をホスティングする。
  • サーバーでCORSヘッダーを適切に設定する。

まとめ

画像が表示されない原因は、ファイルパスの設定ミスからCSSのスタイル問題、サーバー設定やブラウザキャッシュまで、さまざまな理由が考えられます。この記事で紹介したチェックリストを活用して、効率的に問題を解決してください！

-HTML&CSS
-,