Javascript 在react中是否有方法确定图像资源是否无法加载？ 我有一张我正在浏览的图像列表，并将显示在我的组件中，但是我遇到了一个问题，考虑到这些图像由于服务器故障而无法加载，所以我的问题是如何为这些图像提供一个后退。

例如：

imageResourses.map(src => src ? <img src={src} /> : <FallbackImageComponent />)

ImageResources.map（src=>src？：）

我的挑战是，如果存在

src

属性，我将显示实际图像，这可能会由于

服务器故障导致无需输出

因此，如果加载映像时出现问题，我如何显示我的
FallbackImageComponent
。
您可以创建一个可重用的
映像
组件，该组件将在映像未解析时呈现回退映像

以下是
图像
组件的示例代码：

class Image extends React.Component {
  state = {
    hasError: false
  };

  handleError = (e) => {
    this.setState({
      hasError: true
    });
  };

  render() {
    if (this.state.hasError) {
      return "Error Fallback Image";
    }

    return <img {...this.props} onError={this.handleError} />;
  }
}

类映像扩展React.Component{
状态={
hasError:错误
};
handleError=（e）=>{
这是我的国家({
hasError:对
});
};
render（）{
if（this.state.hasError）{
返回“错误回退映像”；
}
返回

请参见此处的工作说明：

注意：
可能还有其他解决方案。如果我偶然发现它们，我会更新答案。
谢谢Yash，这是一个巧妙的技巧。你知道吗
onError
仅在
react
中可用，或者它是
html属性
？
onError
是本机img中存在的事件。你可以在这里查看它：
<Image src="..." />