@s-ui/react-atom-image
v2.16.0
Published
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 Er
Downloads
8,148
Maintainers
Keywords
Readme
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.