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#

<Container size="xs" centered>
  <Stack spacing="8" col className="w-full">
    <LazyImage
      className="w-full h-96 object-cover"
      src="https://cutt.ly/qlcgXXE"
      fallbackSrc="https://cutt.ly/dlOXdEI"
      alt="burger 3"
    />
    <LazyImage
      className="w-full h-96 object-cover"
      src="https://cutt.ly/NlOZ0aT"
      fallbackSrc="https://cutt.ly/8lOZvYr"
      alt="burger 1"
    />
  </Stack>
</Container>

Props#

Name	Type	Description
`src`	`string`	The path to the image source (Mostly a large sized image)
`fallbackSrc`	`string`	This is used as a placeholder for the `src` attribute. In most cases, this will be a relatively small image
`alt`	`string`	The alt text that describes the image
`size`	`string`	This will change the `height` and `width` of the image.
`onLoad`	`function`	A callback for when the image `src` has been loaded
`onError`	`function`	A callback for when there was an error loading the image `src`
`htmlWidth`	`string`, `number`	The native HTML width attribute of the `img` element
`htmlHeight`	`string`, `number`	The native HTML height attribute of the `img` element