画像の読み込みに失敗したときに代替画像を表示する [JavaScript/React]

まずは JavaScript で実装してみます。

<img id="image" src="https://" />
<script>
  const imgEl = document.getElementById("image");
  imgEl.onerror = () => {
    imgEl.onerror = null;
    imgEl.src = "https://placekitten.com/200/200";
  };
</script>

画像の読み込みに失敗したときに onerror が実行されます。

onerror に null を詰めているのは、読み込み失敗時に表示する画像の読み込みに失敗したときに無限ループになってしまうのを防ぐためです。

React でコンポーネントにしてみます。

codesandbox.io

追記：Ref 使わなくても onError={(e) => (e.target.src = "https://placekitten.com/200/200")} で実現できる