[Firefox] imgの縦横サイズが保たれない場合の対処法

状況

画像の遅延読み込みの為、srcに直接 URL を指定せずに data 属性に指定して、JavaScript で置き換える処理を行っていた。

<img data-src="https://example.jp/super.png" />

この img 要素にはheight / widthが指定されているが、Firefox においては縦横サイズが保たれずに、JS による src 置き換え後の画像ロード後に縦横サイズが決まるような動きであった。
Chrome や Safari では問題なし。

Firefox だと、img 要素に src が無い場合に「壊れた画像」として扱われ、縦横サイズを指定してもサイズが保たれないようである。（altの内容だけを表示される）

srcにダミー画像をセットしておけば解決するが、下記のような CSS を指定する事でも解決する。

img {
  -moz-force-broken-image-icon: 1;
}