【React】画像がNotFoundのときimgタグごと表示せず存在を消す

目的

画像がサーバ上に無いとき、こうなる。

画像がサーバ上に無いときは「見つからないよ！」という画像を出すのもかっこ悪いので、タグごと存在を消したい。こう。

参考

• javascript - How to silently hide "Image not found" icon when src source image is not found - Stack Overflow

コード

class Favicon extends Component {
  render() {
    return (
      <div ref={ref => this.root = ref}>
        <img
          src={this.props.url}
          onError={() => this.root.style.display = 'none'}
        />
      </div>
    );
  }
}

やってること

1. 消したいものをrefとして取得しておく
   • デザインの都合上、imgのひとつ上のdivを採っているが、imgそのものでもよい
2. imgタグのonerrorプロパティを使って、上記のrefを消す
   • 試してないけど、.remove()でもいけるかな

そのコミット

github.com

雑感

• ガルパン最終章第1話が明日で都内だいたい終わるらしい
  • 劇場情報 – ガールズ＆パンツァー最終章 公式サイト

DRYな備忘録として

JavaScriptエンジニアが手っ取り早くReactの基礎を理解するための「超」入門書

作りながら学ぶ React入門

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

ガールズ＆パンツァー これが本当のアンツィオ戦です！