React.js 이미지가 500 오류를 던지면 이미지 소스가 바뀝니다

Question

기본적으로 이미지를 잡고 출력하는 React 구성 요소가 있습니다. 그러나 내 문제는 이미지가 500을 던질 때 이미지 원본을 바꿀 수 없다는 것입니다. 내 페이지는 이미지 경로 (/images/icons/image.png)를 반환하지만 이미지 자체는 존재하지 않으므로 나에게 500을 던졌습니다. . 괜찮아요. 문제는 이미지에서 오류가 발생하지 않아서 깨진 이미지를 대체 이미지로 바꿀 수 없기 때문입니다. 나는 인라인 onerror 기능뿐만 아니라 상태 변경 시도했다. 그 누구도 나를 위해 일하지 않을 것입니다. 누구든지이 문제에 대한 해결책을 가지고 있습니다.

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})}/>