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:
Object Fit Property
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.
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.
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.
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.
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.
Using Border Radius
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.
The borderRadius="xl" prop gives the image an extra-large rounded border. This provides exaggerated rounded corners.
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.
The borderRadius="md" prop gives the image a medium rounded border, providing a balance between the original square shape and a fully rounded image.
Image Loading Fallback
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:
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.
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3