読み込みに失敗した画像の代わりにaltを表示する

img要素の読み込みに失敗すると、ブラウザが壊れが画像アイコンとともにalt属性に設定してあるテキストを表示してくれる。

<img
  src="https://example.com/mountain-fuji.png"
  alt="富士山の雪景色。冬の早朝に撮影されたもの"
/>

読み込みに失敗した画像をわかりやすくする

img要素にfont-styleなどを指定することで、alt属性のテキストを他の文章と区別できる。

img {
  font-style: italic;
  color: #999;
}

また、読み込みに失敗した画像には::beforeや::after疑似要素が使えるので、壊れた画像アイコン以外の表現もできる。画像が正常に読み込まれたときは疑似用書は表示されないので、特別なclassや属性を付与する必要はない。

img {
  position: relative;

  &::after {
    content: "読み込みに失敗しました: " attr(alt);
    color: #999;
    position: absolute;
    inset: 0;
    border: 4px solid;
    background-color: #eee;
  }
}

デモ