How to fix image substitution?

Question

React

The user uploads a photo, we display it on the user's screen with the following code:

<Div style={{ textAlign: 'center' }}>
          <img src={ image } alt="remote file" />
</Div>

where image is a link to the user's picture

Some users have a broken link (I can't put it differently), and as a result, nothing is displayed on the screen or it is displayed, but a different photo (we can say that it is a double picture), how can I fix this? That is, to make a normal output of the picture that we see when we click on the link.

Answer 1

wrap img src in a component that will watch img.onerror
https://www.w3schools.com/jsref/event_onerror.asp
and, if an error occurs, let it display some standard image