<img>タグを使って画像を表示したときに、読み込めないとこんな感じになる。

<img src="https://example.com/noimage.png" alt="プロフィール" />

読み込めない場合に、こんな感じで、なにも表示しないようにしたかったときの備忘録。

やり方はこんな感じ。

<img
  src="https://example.com/noimage.png"
  alt
/>

ポイントは以下の2点

1. altを空文字で設定
2. 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)まで♪

参考にしたサイト

• imgタグでエラー時の画像をonerror属性で設定する方法 - Qiita
• img要素の「画像がないことを表すマーク」の表示/非表示 - Qiita
• JavaScript - HTMLの画像読み込み時にonerrorを使用した際の無限ループを回避したい。｜teratail