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:
jsxconst 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.