JavaScript: imgタグでsrcの画像が取得できなかった場合に代替画像を表示

• JavaScript: imgタグでsrcの画像が取得できなかった場合に代替画像を表示
• 例1) 代替画像に画像パスを指定
• 例2) 代替画像に Data URI を指定

例1) 代替画像に画像パスを指定

/invalid.pngが見つからなかった場合に代替画像として/default.pngを表示:

<img src="/invalid.png" onerror="this.src='/default.png';this.onerror='';">

例2) 代替画像に Data URI を指定

/invalid.png が見つからなかった場合に Data URI な代替画像を表示: (以下の画像は1x1の透明Gif)

<img src="/invalid.png" onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';this.onerror='';">

こちら方法であれば外部の代替画像ファイルが不要になります。

END