javascript - 在 Semantic UI React 中隐藏损坏的图像链接

Question

我创建了一个 image使用语义 UI React 的元素。

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

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

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

我已经尝试按照 this StackOverflow answer 的答案进行操作这建议使用

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

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

Answer 1

您可以通过处理程序事件的 target 属性将 img 元素传递给 onError 处理程序，并更改图像的 src 到 '' 或 style.display 到 none。

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

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