Slexy.org is shutting down and stopped accepting new Pastes on May 4th, 2021.
Existing Pastes will stop being available on or after May 10th, 2021.
Author: Not specified Language: javascript
Description: Not specified Timestamp: 2017-08-01 13:23:26 +0000
View raw paste Reply
  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3.  
  4. class ImageLoader extends React.Component {
  5.         constructor(props) {
  6.                 super(props);
  7.                 this.state = {
  8.                         loading: true
  9.                 };
  10.         }
  11.  
  12.         componentDidMount() {
  13.                 let img = new Image()
  14.                 img.src = this.props.imageUrl
  15.                 img.onload = () => {
  16.                         this.setState({ loading: false })
  17.                 }
  18.         }
  19.  
  20.         render() {
  21.                 return (
  22.                         <div>
  23.                                 { this.state.loading ? <p>loading...</p> : <img src={this.props.imageUrl} /> }
  24.                         </div>
  25.                 );
  26.         }
  27. }
  28.  
  29. ImageLoader.propTypes = {
  30.         imageUrl: PropTypes.string
  31. };
  32.  
  33. export default ImageLoader;
  34.  
View raw paste Reply