react にて、画像リンク切れの際、imgタグを非表示にする

通常のhtmlにおいては、onerrorハンドラにてリンク切れのimgタグを非表示にできます。

<img src="original.png" alt="title" onerror="this.style.display='none'"/>

reactではこれができないため、以下のようにonErrorハンドラを作成します。

<img src={`${process.env.PUBLIC_URL}/logo192_.png`} onError={e => e.target.style.display = 'none'} />

サンプル

🚀以下のサンプルは、create-react-app直後のApp.jsを編集したものです。

App.js

import React from 'react';

function App() {
  return (
    <div className="App">
      <img border="1" src={`${process.env.PUBLIC_URL}/logo192.png`} />
      <img border="1" src={`${process.env.PUBLIC_URL}/logo192_.png`} />
      <img border="1" src={`${process.env.PUBLIC_URL}/logo192_.png`} onerror="this.style.display='none'" />
      <img border="1" src={`${process.env.PUBLIC_URL}/logo192_.png`} onError={e => e.target.style.display = 'none'} />
    </div>
  );
}

export default App;

参考

📖Hide broken image link in Semantic UI React
📖リンク切れの時に代替画像を表示したいときはこちら。