壊れた画像をテキスト表示へ切り替える実装方法

ウェブページで画像が読み込めないと、画像の領域が空白になったり、壊れた画像アイコンだけが表示されたりします。通信障害、ファイル名の変更、パスの間違い、アクセス権限、古いHTML仕様など、原因はさまざまです。装飾画像なら見た目の問題で済む場合もありますが、商品名や案内文を画像に含めているページでは、情報そのものが失われます。

このようなときに有効なのが、破損した画像ファイルの代替としてテキストを表示する方法です。画像が正常に表示される環境では画像を使い、取得できない環境では説明文や代替文字列に切り替えることで、内容を伝え続けられます。検索エンジンやスクリーンリーダーにも情報が伝わりやすくなり、古いブラウザーへの対応にも役立ちます。

特に、フレームを使った旧式サイトや、文字コードが崩れたレガシーHTMLを修復するときは、単に画像のURLを直すだけでは不十分です。代替テキスト、エラー処理、レイアウトの崩れ、文字コードの指定を一緒に確認する必要があります。ここでは、基本的なHTMLからJavaScriptを使う方法、実装時の注意点まで順番に整理します。

代替テキストを先に正しく設定する

画像の代わりに表示する情報を用意するなら、まずalt属性を適切に設定します。altは、画像が読み込めないときの代替テキストであり、視覚に頼れない利用者へ画像の意味を伝える役割もあります。

<img src="/images/banner.jpg" alt="サービス内容を確認する">

この例では、画像が取得できない場合に「サービス内容を確認する」という文字が示されます。画像内に文字が書かれている場合は、その文字を簡潔に置き換えます。写真や図版なら、ページの目的に必要な範囲で内容を説明します。

<img src="/images/map.png" alt="東京駅から会場までの案内図">

装飾だけの画像には、空のalt属性を使います。

<img src="/images/line.gif" alt="">

altを省略すると、スクリーンリーダーがファイル名やURLを読み上げることがあります。「image.jpg」や長いファイルパスが表示されても、利用者には意味がありません。画像がリンクになっている場合は、画像の見た目ではなく、リンク先で何ができるかを代替文に書くことが重要です。

<a href="/catalog.html">
  <img src="/images/catalog-button.png" alt="商品カタログを見る">
</a>

ただし、alt属性は「画像エラーが発生した瞬間に別のHTML要素へ置換する処理」とは異なります。ブラウザーによっては代替文字列が画像領域内に表示されますが、CSSの指定や画像のサイズ、古いレンダリングエンジンによって見え方が変わります。確実に決まった位置へ文章を出したい場合は、別の仕組みを加える必要があります。

CSSで画像の代わりになる表示領域を作る

画像を背景として扱っている場合、img要素のaltだけでは代替文が表示されません。CSSのbackground-imageでロゴやボタンを配置しているページでは、画像が失敗したときに背景色と通常のテキストを出せる構造へ変更します。

<a class="site-logo" href="/">カンムリ公式サイト</a>

.site-logo {
  display: block;
  width: 240px;
  min-height: 60px;
  background: #17324d url("/images/logo.png") no-repeat left top;
  color: #fff;
  line-height: 60px;
  text-indent: -9999px;
}

.site-logo:focus,
.site-logo:hover {
  text-indent: 0;
}

この方法では、リンク内に通常の文字を置き、画像が利用できるときだけ視覚的に隠します。ただし、単純にtext-indentで画面外へ移動すると、利用環境によってはアクセシビリティ上の問題が出る可能性があります。現在のサイトでは、画像とテキストを重ねる方法や、画像がある場合だけ文字を隠す方法を検討します。

.logo {
  position: relative;
  display: block;
  min-height: 56px;
  background: #244b68;
  color: #fff;
}

.logo img {
  display: block;
  max-width: 100%;
}

.logo span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

画像の読み込みに成功したとき、文字を消したい場合はJavaScriptやCSSクラスを併用できます。しかし、最初から文字を完全に隠す設計は避けたほうが安全です。スタイルシートが無効、画像が未取得、ブラウザーが古いといった条件でも、意味のある文字が残る構造にしておくと復旧性が高まります。

背景画像を使うのが適切なのは、ロゴの装飾や罫線など、文章として扱う必要がない要素です。見出し、操作ボタン、注意事項のように意味を持つ内容は、HTMLのテキストとして記述し、画像は補助的に使います。

JavaScriptで読み込み失敗を検知する

画像の取得に失敗したら、画像を非表示にして近くのテキストを表示する処理も実装できます。比較的わかりやすい方法は、onerrorイベントを利用することです。

<img
  src="/images/important-banner.jpg"
  alt="キャンペーンの詳細を見る"
  onerror="this.style.display='none'; this.nextElementSibling.hidden=false;"
>
<span hidden>キャンペーンの詳細を見る</span>

画像にエラーが発生すると、画像を隠し、直後のspanを表示します。この方式は短いコードで導入できますが、インラインJavaScriptを多用すると保守が難しくなります。複数の画像を対象にする場合は、JavaScriptファイルでまとめて処理するほうが管理しやすくなります。

<div class="image-fallback">
  <img src="/images/guide.png" alt="利用ガイド">
  <span class="fallback-text" hidden>利用ガイド</span>
</div>

document.querySelectorAll(".image-fallback img").forEach((image) => {
  image.addEventListener("error", () => {
    image.hidden = true;
    image.parentElement.querySelector(".fallback-text").hidden = false;
  });
});

画像を再表示する機能や、代替画像へ切り替える処理も同じ考え方で追加できます。

image.addEventListener("error", () => {
  if (!image.dataset.fallbackApplied) {
    image.dataset.fallbackApplied = "true";
    image.src = "/images/no-image.svg";
  }
});

ここでは無限ループを防ぐため、代替画像にも失敗した場合に何度も同じ処理を実行しないようにしています。onerror内で元と同じURLを設定したり、存在しない代替画像を指定したりすると、エラーイベントが繰り返される危険があります。

JavaScriptに依存しすぎる設計にも注意が必要です。利用者がスクリプトを無効にしている場合や、読み込み前に通信が途切れた場合、処理そのものが動きません。最初からalt属性や通常のテキストをHTMLへ含めておき、JavaScriptは見た目の切り替えを担当する補助機能として扱うと安定します。

古いHTMLとブラウザーの表示差を確認する

フレームを使った古いサイトでは、画像タグの閉じ方、属性の引用符、文字コードの宣言が現在のHTMLと異なることがあります。たとえば、属性値に日本語を直接書いているのに、HTML文書がShift_JISとして配信されていたり、サーバーのHTTPヘッダーが別の文字コードを示していたりすると、代替テキストも文字化けします。

HTMLの先頭付近には、実際のファイルと配信設定に合った文字コードを指定します。

<meta charset="UTF-8">

古いサーバーで設定変更が難しい場合は、HTTPレスポンスヘッダーのContent-Typeも確認します。HTMLにUTF-8と書いてあっても、サーバーがtext/html; charset=Shift_JISを返していれば、ブラウザーはヘッダーを優先することがあります。文字化けした代替文は、画像が壊れたときの救済策として機能しません。

Internet Explorerなど旧ブラウザーでは、画像エラー時のalt表示、CSSの解釈、DOM操作の対応範囲に差があります。古い環境向けの表示仕様を調べる際は、IE4の表示対策のような資料も参考になります。現在のブラウザーだけで確認すると見落としやすい、画像領域の高さや文字の折り返しも検証できます。

とくに注意したいのが、alt属性へ長い文章を入れることです。旧ブラウザーでは画像の枠内に文章がそのまま表示され、横幅を超えてレイアウトを押し広げる可能性があります。代替文は要点を短くまとめ、詳しい説明は画像の外に通常の本文として置くほうが安全です。

<p class="visual-guide">
  <img src="/images/process.png" alt="申し込みの流れ">
</p>
<p>申し込み、確認、支払い、完了の順に手続きを進めます。</p>

この構造なら、画像がない場合でも説明文が残ります。フレーム内の幅が狭いページや、固定幅で作られた古いページでは、代替表示を想定した改行位置も確認してください。

失敗状態を想定してテストする

画像の代替表示は、実際に画像を壊して試すことが大切です。開発者ツールで画像リクエストをブロックする、srcのファイル名を一時的に変更する、ネットワークをオフラインにするなどの方法で、取得失敗時の画面を再現できます。

確認する項目は、画像の有無だけではありません。画像の枠が残るか、代替文が読めるか、リンクを操作できるか、周囲の文章が重ならないか、キーボード操作で位置が分かるかを確認します。スマートフォンでは、長い代替文が画面幅を超えないか、固定幅の画像ボックスが横スクロールを発生させないかも重要です。

遅延読み込みを使っている場合は、画面へ入る前にエラーが起きたケースも確認します。loading="lazy"を指定した画像では、表示領域に近づいた時点で初めて通信が行われます。スクロール中に失敗しても代替文が表示されるよう、通常の読み込みと同じエラーハンドラーを適用します。

<img
  src="/images/news.jpg"
  alt="新着ニュース"
  loading="lazy"
  width="640"
  height="360"
>

widthとheightを指定しておくと、画像が後から表示されるまでのレイアウト移動を抑えられます。失敗時にも一定の領域が残るため、代替文を配置しやすくなります。画像を隠したあとに親要素の高さが不自然に残る場合は、親要素へ付けたクラスを変更して、代替表示用のスタイルへ切り替えます。

const box = image.closest(".image-fallback");

image.addEventListener("error", () => {
  image.remove();
  box.classList.add("is-fallback");
});

.image-fallback.is-fallback {
  min-height: 4rem;
  padding: 1rem;
  background: #f1f3f5;
  color: #222;
}

最後に、HTMLバリデーター、スクリーンリーダー、複数のブラウザーで確認します。画像が表示される正常系だけでなく、ファイルが削除された状態、サーバーが403や404を返す状態、文字コードが異なる状態まで試すことで、復旧性の高いページになります。ログに画像の404が増えている場合は、代替表示に頼るだけでなく、ファイルパスやリダイレクトも修正します。

画像は視覚的な訴求に便利ですが、ページの意味を画像ファイルだけに預けると、少しの障害で情報が失われます。HTMLに意味のあるテキストを残し、alt属性で短い代替文を用意し、必要に応じてCSSやJavaScriptで表示を整える構成が基本です。古いサイトを修復する場合も、文字コード、フレーム構造、固定幅レイアウト、旧ブラウザーの挙動をまとめて確認してください。

まずは重要なロゴ、案内画像、操作ボタンから、画像を無効にした状態で内容が読めるか点検しましょう。壊れた画像のURLを記録し、代替テキストと通常の説明文を追加し、エラー時の表示を実機で確認することで、訪問者が空白の画面に取り残される状態を減らせます。サーバー設定とHTMLを見直し、誰でも情報へ到達できるページへ整えていきましょう。