imgタグでエラー時の画像をonerror属性で設定する方法

3680 ワード
onerror JavaScript img 画像 JavaScript テキストリンク

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が動かないようですが、通常のブラウザであれば正常に動作はできると思います。