Image

分类：

other

日期:

2022-2-13

标签：

chakra

The Image component is used to display images.

Image composes Box so you can use all the style props and add responsive styles as well.

View source @chakra-ui/image

Import#

import { Image } from '@chakra-ui/react';

Usage#

<Box boxSize="sm">
  <Image src="https://bit.ly/dan-abramov" alt="Dan Abramov" />
</Box>

Size#

The size of the image can be adjusted using the boxSize prop.

<Stack direction="row">
  <Image
    boxSize="100px"
    objectFit="cover"
    src="https://bit.ly/dan-abramov"
    alt="Dan Abramov"
  />
  <Image
    boxSize="150px"
    objectFit="cover"
    src="https://bit.ly/dan-abramov"
    alt="Dan Abramov"
  />
  <Image boxSize="200px" src="https://bit.ly/dan-abramov" alt="Dan Abramov" />
</Stack>

Image with border radius#

<Image
  borderRadius="full"
  boxSize="150px"
  src="https://bit.ly/dan-abramov"
  alt="Dan Abramov"
/>

Fallback support#

The Image component allows you provide a fallback placeholder. The placeholder is displayed when:

The fallback or fallbackSrc prop is provided
The image provided in src is currently loading
An error occurred while loading the image src
No src prop was passed

You can also opt out of this behavior by passing the ignoreFallback prop.

<Image src="gibbresh.png" fallbackSrc="https://via.placeholder.com/150" />

Improvements from v1#

Added support for the fit prop to specify how to fit an image within its dimension. It uses the object-fit property.
Added support for the align prop to specify how to align the image within its dimension. It uses the object-position property.
Added support for custom fallback component.

Usage with SSR#

import { Img } from '@chakra-ui/react';

The Img Component provides a fallback for SSR applications which uses the image directly without client side checks.

Props#

`align`

How to align the image within its bounds. It maps to css `object-position` property.

SystemProps["objectPosition"]

`crossOrigin`

The key used to set the crossOrigin on the HTMLImageElement into which the image will be loaded. This tells the browser to request cross-origin access when trying to download the image data.

"" | "anonymous" | "use-credentials"

`fallback`

Fallback element to show if image is loading or image fails.

React.ReactElement

`fallbackSrc`

Fallback image src to show if image is loading or image fails. Note 🚨: We recommend you use a local image

string

`fallbackStrategy`

- beforeLoadOrError(default): loads the fallbackImage while loading the src - onError: loads the fallbackImage only if there is an error fetching the src @see Issue https://github.com/chakra-ui/chakra-ui/issues/5581

FallbackStrategy

"beforeLoadOrError"

`fit`

How the image to fit within its bounds. It maps to css `object-fit` property.

SystemProps["objectFit"]

`htmlHeight`

The native HTML height attribute to the passed to the img

string | number

`htmlWidth`

The native HTML width attribute to the passed to the img

string | number

`ignoreFallback`

If true, opt out of the fallbackSrc logic and use as img

boolean

`loading`

"eager" | "lazy"

`onError`

A callback for when there was an error loading the image src

ReactEventHandler<HTMLImageElement>

`onLoad`

A callback for when the image src has been loaded

ReactEventHandler<HTMLImageElement>

`sizes`

The image sizes attribute

string

`src`

The image src attribute

string

`srcSet`

The image srcset attribute

string