Image

Use objectFit with different sizing approaches for optimal display.

Use the borderRadius prop to control the border radius of the image. Available values: 2xs, xs, sm, md, lg, xl.

Additionally, you can control the image size by wrapping the image in a Stack component and setting the aspectRatio prop.

When the image fails to load, you can use the fallback prop to display a fallback for the image. The fallback can be another image URL, a React component, or a boolean value.

Use the width and height props to control the size of the image.

Use responsive sizing with breakpoint objects for different screen sizes.

This component uses the <img /> tag under the hood. If you are using Next.js or Gatsby, you can leverage the next/image or gatsby-image component to optimize the image loading.

The primary advantage of using this component is that it provides an additional API to control the image size and shape, including properties like borderRadius, objectFit, fallback, and etc. The imageSlot prop allows you to customize how the image is rendered, enabling you to pass in specific attributes for the underlying image component.

It is required to utilize the alt prop ensuring that a meaningful description is provided for users relying on screen readers. In cases where the alt attribute is omitted, the image will be considered decorative and will adopt the presentation role.