JavaScript
js
画像
onerror
img

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

More than 3 years have passed since last update.

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