imgタグで画像が読み取れなかったときになにも表示しないようにしたい

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

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

スクリーンショット 2019-11-10 9.20.29.png

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

スクリーンショット 2019-11-10 9.25.20.png

やり方はこんな感じ。

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

ポイントは以下の2点

  1. altを空文字で設定
  2. onerrorsrcを空にしてonerrorをnullにする
1. 「altを空文字で設定」について

画像が表示されなかった場合に、代わりにalt属性のテキストが表示してくれる
このalt属性がなかった場合、読み取り不可の画像が表示されてしまう。

スクリーンショット 2019-11-10 9.33.44.png

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

2. 「onerrorsrcを空にして」について

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)まで♪

参考にしたサイト

Originally published at qiita.com

きらぷか@i18n補助ツール『トランスノート』開発者

フリーエンジニア/今はNuxt.js/いつかFlutter 受託&アプリ/Webサービス/ゲームを #個人開発 CS修士→SIer/R&D→フリー #paiza はAランクで満足/AtCoderしたい 仕事依頼やご相談はDMまで Kotlin/Python/Swift/Unity/Java/Haskell/DDD

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント