画像がうまく読み込みできなかった時にNoImageを表示させたい

はじめに

こんにちは、エンジニアのkeitaMaxです。

画像がうまく読み込みできなかった時にNoImageを表示させ方を調べたので記事にします。

Reactを使用しています。

結論

以下のようにすると画像が読み込めなかった時にNoImageを出すことができます。

<img
    src={url}
    onError={(event) => {
        const target = event.currentTarget
        target.src = "/imgs/unnamed.jpg" 
    }}
/>

onErrorを使用することで、エラーになった時にunnamedを出しています

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！