<img>タグを使って画像を表示したときに、読み込めないとこんな感じになる。
<img src="https://example.com/noimage.png" alt="プロフィール" />
読み込めない場合に、こんな感じで、なにも表示しないようにしたかったときの備忘録。
やり方はこんな感じ。
<img
src="https://example.com/noimage.png"
alt
onerror="this.onerror = null; this.src='';"
/>
ポイントは以下の2点
-
altを空文字で設定 -
onerrorでsrcを空にして、onerrorをnullにする
1. 「altを空文字で設定」について
画像が表示されなかった場合に、代わりにalt属性のテキストが表示してくれる
このalt属性がなかった場合、読み取り不可の画像が表示されてしまう。
なので、alt属性に空文字を指定しておくことで、
「画像が表示されなかった場合に、代わりに空文字を表示する」ようにしている。
2. 「onerrorでsrcを空にして」について
onerror属性を設定しておくと、画像の読み取りに失敗した場合に、
何らかの処理をすることができる。
この記事によると、srcとaltがともに空文字だと、読み取り不可の画像が表示されないよう。
Firefox, Chrome, IEで、バツ印を非表示にするには、以下のいずれかの状態にする必要があります。
・src属性が空文字 AND alt属性があり/空文字
・src属性がなし
なので、onerrorを使って、画像が読み取れなかったときにsrcを空にしている。
3. 「onerrorをnullにする」について
また、srcを空文字にすると依然として、画像が読み取れない状態が続くため、
onerrorが繰り返し呼び出されるため、onerrorが無限に呼ばれ続けることになる。
そのため、srcを空にするのとあわせ、onerrorを初期化して呼ばれないようにしている。
おわりに
とりあえず、目的は達成できたので、良い感じ。
ただ、
- srcが空なのでエラーのまま
- altが空文字
など、よくなさそうなところがあるので、
- エラー画像に差し替えたり、
- JavaScriptで
<img>自体を表示しないようにする
などのほうがお行儀の良いHTMLになりそう。
こんなのつくってます!!
積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!
もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ
要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪