@s-ui/react-atom-image

AtomImage

AtomImage is a component that loads an image inside, maintaining all the accesibility attributes. This component can be set to show a placeholder image, a skeleton and/or a spinner while the final image is being loaded. This component will also show an Error Box if the image could't be loaded

Installation

$ npm install @s-ui/react-atom-image --save

Usage

After importing the component AtomImage like this

import AtomImage from '@s-ui/react-atom-image'

Basic usage

<AtomImage
  src={ urlImage }
  alt="Nice Picture"
/>

With skeleton while loading

<AtomImage
  src={ urlImage }
  alt="Nice Picture"
  skeleton={ urlImageSkeleton }
/>

With placeholder while loading

<AtomImage
  src={ urlImage }
  alt="Nice Picture"
  placeholder={ urlImagePlaceholder }
/>

With spinner while loading

<AtomImage
  src={ urlImage }
  alt="Nice Picture"
  spinner={ Spinner }
/>

With custom Error if error loading

<AtomImage
  src={ urlImage }
  alt="Nice Picture"
  errorText="Oh no!! This image couldn't be loaded"
  errorIcon={ MyIconErrorLoading }
/>

With picture sources mdn picture

Loads 50x50 image when the viewport is under 480px, elsewise it loads a 150x150 image

<AtomImage
  src='https://via.placeholder.com/50'
  alt=''
  sources={[
    {srcset: 'https://via.placeholder.com/150', media: '(min-width: 480px)'}
  ]}

With Web Performance attributes

Attributes to optimize image that is a LCP element, usually the first image in the viewport

import AtomImage, {DECODING, FETCHPRIORITY, LOADING} from '@s-ui/react-atom-image'

<AtomImage
  src='https://via.placeholder.com/50'
  alt='Optimized image for LCP'
  decoding={DECODING.sync}
  fetchpriority={FETCHPRIORITY.high}
  loading={LOADING.eager}
  sources={[
    {srcset: 'https://via.placeholder.com/150', media: '(min-width: 480px)'}
  ]}

Attributes to optimize image that is not a LCP element, usually the the images out of the viewport

import AtomImage, {DECODING, FETCHPRIORITY, LOADING} from '@s-ui/react-atom-image'

<AtomImage
  src='https://via.placeholder.com/50'
  alt='Optimized image to lazy load and low the priority'
  decoding={DECODING.async}
  fetchpriority={FETCHPRIORITY.low}
  loading={LOADING.lazy}
  sources={[
    {srcset: 'https://via.placeholder.com/150', media: '(min-width: 480px)'}
  ]}

Find full description and more examples in the demo page.