外部のサイトの画像を表示する際に、画像が表示されなかったらその画像を非表示にする必要があり、JavaScriptのonErrorを使って実現できることがわかりました。

例えば、下記のようなソースコードがあったとして、test.gifがサーバから削除されていた場合に100×100のサイズでブランクまたは×等の表示になってしまいます。

<img src="http://takahitokikuchi.poitan.net/test/test.gif" width="100" height="100" alt="test" />

そこで、ソースコードを次のように書き換えます。

<img src="http://takahitokikuchi.poitan.net/test/test.gif" onError="this.style.display='none';" style="display:block;" width="100" height="100" alt="test" />

これでtest.gifが消えていたら、<img>そのものが非表示になりますので、100×100のブランクは表示されなくなります。

---

↓onErrorを入れた場合

---

↓onErrorがない場合

---