読み込みに失敗した画像の代替表示

はじめに

この実験では、画像の読み込みに失敗した場合にエラーメッセージと画像の URL を表示するために、img要素にスタイルを適用する方法を学びます。表示できない画像に対してユーザーにやさしい代替表示を作成するために、::beforeおよび::after疑似要素を使用します。この実験が終了するとき、画像読み込み失敗時に有用な情報を提供することで、ユーザー体験を向上させることができます。

読み込みに失敗した画像の代替表示

VM 内には既にindex.htmlとstyle.cssが用意されています。

画像の読み込みに失敗した場合、エラーメッセージをユーザーに表示します。これを行うには、img要素をテキストコンテナとしてスタイルを適用し、その表示をブロックに設定し、幅を 100% に設定します。::beforeおよび::after疑似要素を使用して、それぞれエラーメッセージと画像の URL を表示します。これらの要素は、画像の読み込みに失敗した場合にのみ表示されます。

以下はコードの例です：

<img src="https://nowhere.to.be/found.jpg" />

img {
  display: block;
  width: 100%;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  font-family: sans-serif;
  font-weight: 300;
}

img::before {
  content: "Sorry, this image is unavailable.";
  display: block;
  margin-bottom: 8px;
}

img::after {
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！読み込みに失敗した画像の代替表示の実験を完了しました。技術力を向上させるために、LabEx でさらに実験を行って練習してください。