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

1 min read読了の目安(約1500字

https://zenn.dev/catnose99/scraps/a1ec13e8a2d17350fbfe

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

追記: iOSで動かなかったのでこちらはネタとしてしか使えないと思います

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

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

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

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

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

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

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

正しい画像のURLを指定した場合

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

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

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

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

誤ったURLを指定して読み込みエラーになった場合

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

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

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

画像の読み込みエラー

疑似要素テキストに改行を入れる

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

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

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