Image.js

import React, { useState } from 'react';
import PropTypes from 'prop-types';

import {
  container,
  cap,
  fullHeight,
} from './style.module.css';


const Image = ({
    maxHeight,
    isFullHeight,
    img,
    fullHeight,
    caption,
    alt,
  }) => {
  const [showBg, setShowBg] = useState(true);
    
  const style = {
    maxHeight,
  };

  if (maxHeight !== 'auto' && isFullHeight === false) {
    style.width = 'auto';
  };

  return (
    <div className={`${container} ${isFullHeight ? fullHeight : ''}`} style={{
      backgroundSize: 'cover',
      backgroundImage: showBG ? 'url("' + img.placeholder + '")' : 'none'
    }}>
      <img
        style={style}
        src={img.src}
        srcSet={img.srcSet}
        onLoad={() => setShowBg(false)}
        alt={alt}
      />
      {
        caption && (
          <div className={cap}>
            {caption}
          </div>
        )
      }
    </div>
  );
}

Image.defaultProps = {
  img: null,
  alt: null,
  caption: '',
  fullHeight: false,
  isFullHeight: false,
  maxHeight: 'auto',
}

Image.propTypes = {
  img: PropTypes.PropTypes.object.isRequired,
  alt: PropTypes.string.isRequired,
  caption: PropTypes.string,
  fillViewport: PropTypes.bool,
  maxHeight: PropTypes.string,
};

export default Image;