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

| name | description | type | default | |------|-------------|------|---------| | src | The image URL | string | | | alt? | An alternative text description of the image | string | | | decoding? | Decoding hint to the browser | auto | sync | async | async | | loading? | | auto | eager | lazy | lazy | | className? | CSS class of the image | string | async-image | | placeholder? | A fallback element if the image could be loaded | React.ReactNode | string | |