如何解决有没有一种反应来找出图像资源是否无法加载?
我有一个正在遍历的图像列表,它们将显示在我的组件中,但是我有一个问题,考虑到其中一些图像由于服务器故障而无法加载,所以我的问题是如何提供这些图片的备用。
例如:
imageResourses.map(src => src ? <img src={src} /> : <FallbackImageComponent />)
我的挑战是,如果存在src
属性,我将显示实际图像,由于server
失败,该图像可能导致不期望的输出。
因此,如果加载图片时出现问题,如何显示我的FallbackImageComponent
?
解决方法
您可以创建一个可重用的Image
组件,该组件将在无法解析图像时呈现备用图像。
以下是Image
组件的示例代码:
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} />;
}
}
用法:
<Image src="..." />
在这里查看工作:https://codesandbox.io/s/heuristic-snow-5295o?file=/src/App.js:348-660
Note:
可能还有其他解决方案。如果我偶然发现他们,我会更新答案。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。