LazyImage

LazyImage component enables you to smartly load the images of your app by demand, using small placeholders (fallbackSrc) while the original image is being lazy loaded.

This component composes of react-intersection-observer so it will only load an image as a page is scrolled.

Import#

import { LazyImage } from '@nature-ui/core';

Usage#

burger 3burger 1
Editable Example

Props#

NameTypeDefaultDescription
srcstringThe path to the image source (Mostly a large sized image)
fallbackSrcstringThis is used as a placeholder for the src attribute. In most cases, this will be a relatively small image
altstringThe alt text that describes the image
sizestringThis will change the height and width of the image.
onLoadfunctionA callback for when the image src has been loaded
onErrorfunctionA callback for when there was an error loading the image src
htmlWidthstring, numberThe native HTML width attribute of the img element
htmlHeightstring, numberThe native HTML height attribute of the img element