HTMLの画像読み込み時にonerrorを使用した際の無限ループを回避したい。

HTMLで下記のようなコードで画像の表示をしています。

HTML
1<img src="./img/Sample.png" onerror="this.src='./img/no_image.png';" alt="サンプル画像">

src属性のパスの画像がない場合は、no_image.pngの画像を表示させたいのですが、
この記述だと、onerrorで指定したパスに画像がなかった場合、無限ループになってしまうようなのです。

どうにかして、これを回避する方法はないでしょうか？
なるべくHTMLだけで完結させたいのですがそれは可能でしょうか？

ご存知の方いらっしゃいましたら、アドバイスいただきたいです。

行動規範の内容に同意します

回答3件

ベストアンサー

img.onerror = null; でイベントを削除すれば、一度だけ発火できます。

HTML
1<img src="./img/Sample.png" onerror="this.onerror = null;img.src = './img/no_image.png'" alt="サンプル画像">

投稿2015/09/04 12:44

think49

総合スコア18164

a-takahashi

2015/09/07 03:59

まさに私が探していたものです!! ありがとうございました。他に回答いただいた方もありがとうございました。大変参考になりました。

行動規範の内容に同意します

jsはhtmlファイルの中に書いちゃえばいいんじゃないかなと思いましたが。。。

短いjsなのでもしよろしければこれでいかがでしょうか。
（no_imageは確認のためにterateilの画像を突っ込みました！）

html
1<body>
2	<img src="./img/Sample.png" id="js-image"alt="サンプル画像">
3  <script>
4    var img = document.getElementById('js-image');
5    img.onerror = function(){
6      alert('not loading');
7      //画像をappend
8      img.setAttribute('src', 'https://cdn.teratail.com/img/common/login/imglogoLogin_white.png?1441261867');
9    }
10  </script>
11</body>