React.jsイメージが500のエラーを投げるときイメージソースを置き換えます

Question

私は基本的に画像をつかみ、それを出力するReactコンポーネントを持っています。しかし、私の問題は、イメージが500をスローするときイメージソースを置き換えることができないということです。私のページはイメージパス（/images/icons/image.png）を返しますが、イメージ自体は存在しないので、私に500をスローします。これは問題ありませんが、イメージ内のエラーが発生しないため、壊れたイメージを代替イメージに置き換えることはできません。私はインラインエラー機能だけでなく、状態の変更を試みました。それらのどれも私のために働くことはありません。誰にもこの問題の修正があります。これは私のコンポーネントは次のようになります。

const VerifiedLogo = ({ src, alt, isVerified }) => (
    <div className={styles.logo}> 
     <img src={src ? src : '/images/icons/tournament-logo-placeholder.png'} alt={alt} onError="this.src='/images/icons/tournament-logo-placeholder.png'" /> 
     <VerifiedBadge isVisible={isVerified} /> 
    </div> 
); 

export default VerifiedLogo; 

Answer 1

onErrorはconstructorで、機能を期待：renderで

this.state = { 
     logoOk: false 
    } 

を：

<img src={this.state.logoOk ? src : altLink} onError={()=>this.setState({logoOk: false})}/>