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

Question

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

<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

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

none

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

Answer 2

您可以使用：

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

Answer 3

我遇到了一个问题，其中img图标使用src =“”呈现。由于存在初始状态源，我将其设置为空字符串

在useEffect /（组件已装入）中。我将该状态更新为所需的网址。

问题是在下载URL时，残破的img图标仍然存在。

也不会触发onError = {}。

解决方案是有条件的渲染。

{ 
source === "" ? null : <Img src={source} onError={someMethod} /> 
}