在语义 UI React 中隐藏损坏的图像链接

Question

我使用 Semantic UI React创建了一个图像元素。

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

如果图像的src属性未加载，则会显示损坏的图像占位符。

当我的图像未加载时，如何隐藏这个损坏的图像占位符而不显示图像？

我已经尝试按照这个 StackOverflow 答案中的答案进行操作，该答案建议使用

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

但我收到错误 Expected 'onError' listener to be a function.

Answer 1

您可以通过img元素的onError经过处理事件的处理程序target属性，改变图像的src对''或style.display到none。

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

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

Answer 2

您可以使用：

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