I have a React component which basically grabs an image and outputs it. However my issue is that I cant replace the image source when the image throws a 500. My page will return the image path (/images/icons/image.png) however that image itself does not exist, so it throws a 500 on me. This is fine, the issue is it wont trigger the onerror in the image so I cant replace the broken image with a fallback image. I've tried changing state, as well as an inline onerror function. None of those will work for me. WOuld anyone has a fix for this issue. This is what my component looks like:
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;
onError expects a function, in the constructor:
this.state = {
logoOk: false
}
in the render:
<img src={this.state.logoOk ? src : altLink} onError={()=>this.setState({logoOk: false})}/>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句