JSPM

@chakra-ui/image

0.0.0-dev-20230112141201
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 273163
  • Score
    100M100P100Q175352F
  • License MIT

React component for progressive image loading

Package Exports

  • @chakra-ui/image
  • @chakra-ui/image/package.json

Readme

@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"
/>