ImageResource

ImageResource.jsx

import React, { Component } from "react";

class ImageResource extends Component {
  constructor(props) {
    super(props);

    const image = new Image();
    image.onload = this.handleLoadImage;

    this.state = { image, src: props.lowQuality };
  }

  static getDerivedStateFromProps(props, state) {
    const prevProps = state.prevProps || {};
    const isNew = prevProps.original !== props.original;

    if (isNew) {
      const original = isNew ? props.original : prevProps.original;
      const lowQuality = isNew ? props.lowQuality : prevProps.lowQuality;
      state.image.src = original;

      return { prevProps: props, src: lowQuality };
    }

    return { prevProps: props };
  }

  handleLoadImage = () => {
    this.setState({ src: this.props.original });
  };

  render() {
    const { width, height, className, alt } = this.props;

    return (
      <img
        src={this.state.src}
        width={width}
        height={height}
        className={className}
        alt={alt}
      />
    );
  }
}

export default ImageResource;