How to Hide a Broken Image in React?

Learn how you can hide images that fail to load in React

In React, we can configure an onError event handler on the image to either hide the image or reset the image src attribute. In either case, it will hide the broken image icon shown by the browser when an image fails to load.

Hiding the Broken Image in DOM

<img src="my/image.png" onError={(event) => event.target.style.display = 'none'} />

Resetting the Broken Image src Attribute

<img src="my/image.png" onError={(event) => event.target.src = ''} />

Hope you found this post useful. It was published . Please show your love and support by sharing this post.