imgタグで画像が404のときに代替画像を表示する

HTML img タグで画像が 404 エラーのときに代替画像を表示する方法 - to-me-mo-rrow - 未来の自分に残すメモ -

TL;DR

• onerror="this.src = 'alt.png'; this.removeAttribute('onerror')" を指定
  • エラー時には代替画像を読み込んで、onerror 属性自身も削除
• onload="this.removeAttribute('onerror'); this.removeAttribute('onload'); も一緒に指定
  • エラー無し時に onerror, onload 属性を消せる
• 上記をまとめると以下

<img src="404.png"  
 onerror="this.src='alt.png'; this.removeAttribute('onerror'); this.removeAttribute('onload');"  
 onload="this.removeAttribute('onerror'); this.removeAttribute('onload');"  
>

https://developer.mozilla.org/ja/docs/Web/HTML/Element/img#browser_compatibility onerrorは非推奨なことに留意する