Hide broken image link in Semantic UI React

Question

I've created an image element using Semantic UI React.

<Image floated="right" size="mini" src="/someImageUrl.png" />

If the image's src property doesn't load, a broken image placeholder is displayed instead.

How can I hide this broken image placeholder and show no image instead when my image doesn't load?

I've tried following the answer from this StackOverflow answer which suggests using

<Image src="Error.src" onerror="this.style.display='none'"/> 

But I receive the error Expected 'onError' listener to be a function.

Answer 1

You can pass the img element to an onError handler through the handler event's target property, and change the image's src to '' or style.display to none.

<Image src={imageObject.Url} onError={i => i.target.src=''} />

<Image src={imageObject.Url} onError={i => i.target.style.display='none'} />