😇

CSSで画像の読み込みがエラーになったときにだけテキストを表示

2020/12/08に公開

はじめに：今回のテクニックはあまり実用的ではないかもしれません。

<img>要素では基本的に疑似要素の:beforeを使うことはできません。CSSでimg:before { content: "Foo" }と書いても表示されるのは画像だけです。テキストは表示されません。

エラーのときだけ疑似要素が表示される

ただし、:beforeや:afterのcontentプロパティに指定したテキストは、画像がエラーになったときにはaltテキストと合わせて表示されます。これを活用して、画像の読み込みが失敗したときにだけメッセージを表示してみます。

↓ CSSはこんな感じにしてみます。altテキストの前に表示するものを:beforeで、後に表示するものを:afterで指定します。

CSS

img:before { 
  content: "表示したかった『";
}

img:after { 
  content: "』の画像が見つからんかったわ。😇URLは " attr(src) " なんやが…";
}

なお、content内でattr(src)を使うと、imgタグに指定されたsrcの中身を表示することができます。

まずsrcに正しい画像を指定してみます。

HTML

<img src="正しい画像のURL" alt="ネコの画像" width="300" height="200"/>

ネコの画像
問題なく表示される

こんな感じでかわいいネコの画像だけが表示されました。テキストは表示されません。

続いて、存在しない画像のURLを指定してみます。

HTML

 <img src="https://invalid.cat/cat.jpg" alt="二足歩行で歩き回るネコ" width="300" height="200"/>

👇 画像の読み込みエラーになり、こんな表示になりました。

画像の読み込みエラー

窮屈なので改行を入れてみます。疑似要素のcontent内で改行を入れるためにはwhite-spaceプロパティにpreやpre-wrapを指定したうえで改行したい位置に\Aを挿入します。

CSS

img {
  white-space: pre;
}
img:before { 
  content: "表示したかった\A『";
}
img:after { 
  content: "』\Aの画像が見つからんかったわ😇\AURLは " attr(src) " なんやが…";
}

👇　結果はこんな感じになりました。