Prevent an image from showing if there is an error in React

To prevent an image from showing if there is some error (e.g. 403):

jsx
<img src = {imgURL} onError = {e => e.target.style.display = 'none'}></img>

If you are using React Markdown, you can define the renderers such as:

jsx

const MarkDownMessage   = ({ message }) => {
    
    const renderers = {
        
        image: props => <img src = {props.src} onError = {(e) => e.target.style.display = 'none'}></img>
        
    }
    
    return (
        <ReactMarkdown 
            source    = {message} 
            renderers = {renderers}
        />
    );
    
}

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.