console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js">
</script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js">
</script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js">
</script>
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class ImageWithStatusText extends React.Component { constructor(props) { super(props); this.state = { imageStatus: null };
} handleImageLoaded(e) { console.log('handleImageLoaded: ', e); this.setState({ imageStatus: 'loaded' }); } handleImageErrored()
{ this.setState({ imageStatus: 'failed to load' }); } render() { return (
<div>
<img
src={this.props.imageUrl}
onLoad={this.handleImageLoaded.bind(this)}
onError={this.handleImageErrored.bind(this)}
/>
{this.state.imageStatus}
</div>
);
}
}
class App extends React.Component {
render() {
const imageUrl = 'https://xcimg.szwego.com/o_1ecm6bnep1l3qfon1nh3t3lps7i.jpg';
return (
<div>
<div>ImageWithStatusText</div>
<ImageWithStatusText imageUrl={imageUrl} />
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById("app")
);
</script>
</body>
</html>