@chakra-ui/image
v0.0.0-dev-2022128215052 react progressive lazyloading component chakra ui image loading
@chakra-ui/image
The Image component is used to display images.
Installation
yarn add @chakra-ui/image
Import component
import { Image } from "@chakra-ui/image"
Basic Usage
import React from "react"
import { Image } from "@chakra-ui/image"
const Example = () => (
<Image
src="photo.png"
fallbackSrc="placeholdit.com/200x200"
alt="A Placeholder Image"
/>
)
Fallback support
You can provide a fallback image for when there is an error loading the src
of
the image. You can also opt out of this behavior by passing the ignoreFallback
prop.
<Image
src="photo.png"
fallbackSrc="placeholdit.com/200x200"
alt="A Placeholder Image"
/>
npm i @chakra-ui/[email protected]
Metadata
- MIT
- Whatever
- Segun Adebayo
- released 2/28/2022