@chakra-ui/image

React component for progressive image loading

Usage no npm install needed!

<script type="module">
  import chakraUiImage from 'https://cdn.skypack.dev/@chakra-ui/image';
</script>

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