react-async-image v3.0.0

react-async-image

ReactJS 'img' tag rendering with loading styles, async decoding and error fallback.

Note: required React v16.8+

Install

npm i -S react-async-image

Usage

import Image from 'react-async-image';
const images = ['./images/picture1.jpg', './images/picture2.png'];

<div className="wrapper">
  {images.map((src, index) => (
    <div key={index} style={{ width: 100, height: 100 }}>
      <Image
        src={src}
        className="image"
        placeholder={<div className="placeholder">oops</div>}
      />
    </div>
  ))}
</div>

.image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transition: opacity .5s;
}

.image-loading {
  opacity: 0;
  transition: none;
}

Props