詳しく書いてある記事はこちらで、
https://bitsofco.de/styling-broken-images/
imgがbroken状態になるとbefore, after擬似要素使えるからよしなにやっつければおkという意味である。
この記事ではbefore, after擬似要素に背景色をつけてposition:absoluteで上に被せて消している。
私の場合は
- どんなサイズの画像があるか事前にわからない
- レスポンシブ
- NO IMAGE画像素材を使う
- Retina対応もする
ていう条件があった。
画像のサイズが固定であればimg::beforeのcontentプロパティにNo Image画像設定すれば済む話だが、
これをどんなサイズの画像が表示されるかわからない、かつレスポンシブな画像に対してやってしまうと諸々崩れて悲しい結果になった。
解決策としてcontentプロパティに透明PNG画像、backgroundにNo Imageを設定するのが一番手っ取り早いかなと思った：
See the Pen hide responsive image broken icon by Tenderfeel (@Tenderfeel) on CodePen.
サンプルみたく画像サイズがpxで指定できる場合はimgにoverflow:hiddenしておけばbroken iconは表示されなくなるが、
height:autoだったり%で指定していたりすると消えない。
こうなるともうCSSだけでは厳しいのでJavaScriptでerrorイベントにハンドリングして処理する：
See the Pen styling responsive image broken icon by Tenderfeel (@Tenderfeel) on CodePen.
読み込みエラーになった画像にはサイズの情報がない状態になるので、それを補うためにpadding-topで領域を作る。
padding-topはだいたい16:9くらいになる56.25%を指定しておく。
img要素はbefore擬似要素の上に配置するためにposition:absoluteを指定する。
lazyload系ライブラリを使うなら、errorのイベントハンドラで上の処理がやれる。