<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属性のテキストが表示してくれる
このalt属性がなかった場合、読み取り不可の画像が表示されてしまう。

なので、alt属性に空文字を指定しておくことで、
「画像が表示されなかった場合に、代わりに空文字を表示する」ようにしている。

onerror属性を設定しておくと、画像の読み取りに失敗した場合に、
何らかの処理をすることができる。

この記事によると、srcとaltがともに空文字だと、読み取り不可の画像が表示されないよう。

Firefox, Chrome, IEで、バツ印を非表示にするには、以下のいずれかの状態にする必要があります。
・src属性が空文字 AND alt属性があり/空文字
・src属性がなし

なので、onerrorを使って、画像が読み取れなかったときにsrcを空にしている。

また、srcを空文字にすると依然として、画像が読み取れない状態が続くため、
onerrorが繰り返し呼び出されるため、onerrorが無限に呼ばれ続けることになる。

そのため、srcを空にするのとあわせ、onerrorを初期化して呼ばれないようにしている。

おわりに

とりあえず、目的は達成できたので、良い感じ。

ただ、

など、よくなさそうなところがあるので、

などのほうがお行儀の良いHTMLになりそう。

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪