ImageBlock.js

class ImageBlock extends React.PureComponent {
  state = {
    loaded: false
  };

  componentDidMount() {
    this.ref.addEventListener("load", this.onLoad);
  }

  onLoad = () => {
    this.setState({
      loaded: true
    });

    // If this component is part of a webGL element add the image
    if (this.props.addImage) {
      this.props.addImage(this.ref);
    }
  };
  
  render() {
    const { title, url, copy } = this.props.data;
    const { loaded } = this.state;
    return (
      <div className={css("content-block", loaded && "loaded")}>
        <img
          src={`${url}`}
          width="100%"
          ref={r => {
            this.ref = r;
          }}
        />
        <Headline copy={title} />
        {copy != "" && <p>{copy}</p>}
      </div>
    );
  }
}