Chakra-UI

I♥️Components

Image

|

Chakra Docs

|

⦾ The Image component from Chakra UI is a reliable and versatile tool to handle images in your React applications. It extends the native img HTML element and enhances it with extra features and built-in styling options to provide a smoother developer experience. It is an efficient and powerful tool for handling images in your React application. Its ease of use and out-of-the-box enhancements to the img element make it an attractive choice for developers.

One of the major advantages of using the Chakra UI Image component is its automatic handling of fallback UI. In a scenario where your image fails to load, instead of displaying a broken image symbol, Chakra UI Image allows you to specify a fallback UI that will be displayed. This ensures a more polished user experience.

The Image component is also lazy-loaded by default, which means the images will only load when they appear in the viewport. This optimizes your application's performance by reducing initial loading times, particularly when dealing with large images or many images on a page. Moreover, it comes with support for responsive design out of the box. You can specify an array of image sources, and Chakra UI will choose the best one based on the current screen resolution, maximizing the efficiency of bandwidth usage.

This component can be imported as follows:

Examples

Basic Usage

⦾ Using the Image component in Chakra UI is quite straightforward. It can be imported from @chakra-ui/react and then used as a typical React component. The source of the image can be provided using the src prop. For the fallback UI, fallbackSrc prop can be used. In the following example, the alt prop is also used to provide alternate text for screen readers or in situations where the image cannot be rendered.
A cool image

Code

Image Sizing

⦾ The size of the Image component can be conveniently adjusted using the boxSize prop in Chakra UI. This attribute is very helpful for keeping the layout consistent and the images within the desired dimensions. It accepts various units including pixels (px), rems (rem), or ems (em).
Pretty Shapes
Pretty Shapes
Pretty Shapes

Code

Object Fit Property

⦾ Another useful prop to consider is objectFit, which determines how the image should be resized to fit its container. Options include fill, contain, cover, none, and scale-down. The cover value, for instance, scales the image to maintain its aspect ratio while filling the box, often cropping the image in the process.
artic fox

fill: This is the default value. The image is resized to fill the container box. It doesn't preserve the aspect ratio of the image and might lead to image distortion if the aspect ratio of the box is different from the image.

artic fox

contain: The image is scaled to maintain its aspect ratio while fitting within the box. The entire image is visible, but this could leave empty space (known as letterboxing) if its aspect ratio is different from the container.

artic fox

cover: The image is scaled to maintain its aspect ratio while filling the container's entire content box. If the aspect ratios of the image and container are different, some part of the image may be cropped.

artic fox

none: The image will ignore the size of the container and will maintain its original size. This means some parts of the image might not be visible if the container is smaller than the image.

artic fox

scale-down: The image is compared to both the none or contain options to find the smallest concrete object size. This means it behaves as contain most of the time unless the image is smaller than the box, in which case it behaves as none and the original size of the image is used.

Code

Using Border Radius

⦾ In this example, we have four images with different borderRadius values. With these props, you can customize the look of your images to match your design requirements. You're not just limited to these values; Chakra UI allows you to use custom values as per your needs.
prettiness

The borderRadius="full" prop gives the image a completely circular shape, regardless of its original aspect ratio. It's great for creating avatar images or icons.

prettiness

The borderRadius="xl" prop gives the image an extra-large rounded border. This provides exaggerated rounded corners.

prettiness

The borderRadius="lg" prop gives the image a larger rounded border. This is a more subtle effect, creating a sense of softness and blending the image with its surroundings.

prettiness

The borderRadius="md" prop gives the image a medium rounded border, providing a balance between the original square shape and a fully rounded image.

Code

Image Loading Fallback

⦾ In the real world, images can fail to load for a variety of reasons, such as network errors, incorrect URLs, or the image source being temporarily unavailable. In these cases, it's good practice to have a fallback image that can be displayed. This is especially true for product-based applications where it is crucial to provide a seamless user experience.

Chakra UI's Image component supports a fallbackSrc prop that allows you to specify a fallback image URL. This image will be displayed in any of the following cases:

  • The src prop has been provided, but the image is still loading.
  • src An error occurred while loading the image provided in the srcprop.
  • The src prop was not passed.
  • The fallbackSrc prop has been explicitly provided.

You can opt out of this behavior by passing the ignoreFallback prop if you do not wish to use a fallback image.

In this example, the src URL is invalid, which simulates a loading error. The Image component then displays the fallback image specified by the fallbackSrc prop. The end result is a smooth user experience, with the placeholder image displayed instead of a broken image link or a blank space.

Image with Fallback

Code

Did you know?

Creative Idea No. 1

Adding Captions to Images: Sometimes, you may want to add a caption to an image. While there isn't a dedicated caption prop, we can achieve this by wrapping the Image component within a Box, Flex or a Figure and then adding a Figcaption component.
beautiful geometry

Lovely image courtesy of Generative-Placeholders

Code

Creative Idea No. 2

Clickable Image: What if you want the image to be clickable, perhaps to open a larger version of the image or navigate to a different page? You can easily achieve this by wrapping the Image component with the Link component. In this example, clicking on the image will open a new tab with the URL specified in the Link component's href prop.
Loveliness

Code

Creative Idea No. 3

Adding Image Filters: While Chakra UI doesn't provide image filters out of the box, you can utilize CSS filters via the filter prop to modify the visual presentation of your images. You can read more about this in the section dedicated to filters.
Loveliness

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.