onerror属性はjavascriptでも書くことができますが、今回はimgタグに直接うめこんでしまうことで1行でスマートにエラー時用の画像も含めてimgタグを実装します。
こんなかんじです
<img src="表示したい画像のurl" onerror="this.src='エラー時に表示したい画像のurl';" />
例です
入れたい画像の正しいurl:
http://yutarotanaka.com/blog/wp-content/uploads/2014/08/logo-square-ed574fbb8006572197b178cd7f9ad00c.png
入れたい画像の正しくないurl:
http://yutarotanaka.com/blog/wp-content/uploads/2014/08/logo-square-ed574fbb8006572197b178.png
エラー時に表示させたい画像のurl:
http://smooch.jp/html/noimage.jpg
とします。
では実際にやってみましょう。
正しいurlの場合:
<img width="100" height="100" src="http://yutarotanaka.com/blog/wp-content/uploads/2014/08/logo-square-ed574fbb8006572197b178cd7f9ad00c.png" onerror="this.src='http://smooch.jp/html/noimage.jpg';" />
正しくないurlの場合:
<img width="100" height="100" src="http://yutarotanaka.com/blog/wp-content/uploads/2014/08/logo-square-ed574fbb8006572197b178.png" onerror="this.src='http://smooch.jp/html/noimage.jpg';" />
。。。今回はサイトの性質上onerrorが動かないようですが、通常のブラウザであれば正常に動作はできると思います。