目的

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

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

参考

• 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な備忘録として