The Image component is used to display images with support for fallback.


import { CImage } from "@chakra-ui/vue-next"


Jonathan Bakebwa
<CBox w="sm">    <CImage src="" alt="Jonathan Bakebwa" /></CBox>


The size of the image can be adjusted using the box-size prop.

Jonathan BakebwaJonathan BakebwaJonathan Bakebwa
<CStack direction='row'>    <CImage box-size='100px' object-fit='cover' src="" alt="Jonathan Bakebwa" />    <CImage box-size='150px' object-fit='cover' src="" alt="Jonathan Bakebwa" />    <CImage box-size='200px' src="" alt="Jonathan Bakebwa" /></CStack>

Image with border radius

Jonathan Bakebwa
<CBox w="sm">    <CImage border-radius='full' box-size='150px' src="" alt="Jonathan Bakebwa" /></CBox>

Fallback support

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

  • The fallback or fallback-src 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.

<CImage src="gibberesh.png" fallbackSrc="" />


srcstringThe path to the image source
fallback-srcstringIn event there was an error loading the src, specify a fallback. In most cases, this can be an avatar or image placeholder
altstringThe alt text that describes the image
ignoreFallbackbooleanfalseOpt out of the fallback-src logic and use the CImage directly

Edit this page on GitHub