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

【问题标题】：Hide broken image link in Semantic UI React在 Semantic UI React 中隐藏损坏的图像链接
【发布时间】：2018-10-04 10:37:35
【问题描述】：

我使用 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.

【问题讨论】：

【解决方案1】：

我遇到了一个问题，即使用 src = "" 呈现 img 图标。因为我将初始状态源设置为空字符串

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

问题是在下载 url 时损坏的 img 图标仍然存在。

onError={} 也不会触发。

解决方案是条件渲染。

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

【讨论】：

【解决方案2】：

您可以通过处理程序事件的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'} />

【讨论】：

【解决方案3】：

你可以使用：

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

【讨论】：