`})}),` `,(0,n.jsx)(e.h2,{id:"size",children:"Size"}),` `,(0,n.jsxs)(e.p,{children:["The size of the image can be adjusted using the ",(0,n.jsx)(e.code,{children:"boxSize"})," prop."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Dan Abramov

`})}),` `,(0,n.jsx)(e.h2,{id:"image-with-border-radius",children:"Image with border radius"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Dan Abramov

`})}),` `,(0,n.jsx)(e.h2,{id:"fallback-support",children:"Fallback support"}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"Image"}),` component allows you provide a fallback placeholder. The placeholder is displayed when:`]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["The ",(0,n.jsx)(e.code,{children:"fallback"})," or ",(0,n.jsx)(e.code,{children:"fallbackSrc"})," prop is provided"]}),` `,(0,n.jsxs)(e.li,{children:["The image provided in ",(0,n.jsx)(e.code,{children:"src"})," is currently loading"]}),` `,(0,n.jsxs)(e.li,{children:["An error occurred while loading the image ",(0,n.jsx)(e.code,{children:"src"})]}),` `,(0,n.jsxs)(e.li,{children:["No ",(0,n.jsx)(e.code,{children:"src"})," prop was passed"]}),` `]}),` `,(0,n.jsxs)(e.p,{children:["You can also opt out of this behavior by passing the ",(0,n.jsx)(e.code,{children:"ignoreFallback"})," prop."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`

`})}),` `,(0,n.jsx)(e.h3,{id:"improvements-from-v1",children:"Improvements from v1"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:["Added support for the ",(0,n.jsx)(e.code,{children:"fit"}),` prop to specify how to fit an image within its dimension. It uses the `,(0,n.jsx)(e.code,{children:"object-fit"})," property."]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:["Added support for the ",(0,n.jsx)(e.code,{children:"align"}),` prop to specify how to align the image within its dimension. It uses the `,(0,n.jsx)(e.code,{children:"object-position"})," property."]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:["Added support for custom ",(0,n.jsx)(e.code,{children:"fallback"})," component."]}),` `]}),` `]}),` `,(0,n.jsx)(e.h2,{id:"usage-with-ssr",children:"Usage with SSR"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import { Img } from '@chakra-ui/react' `})}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"Img"}),` Component provides a fallback for SSR applications which uses the image directly without client side checks.`]})]})}function k(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(s,i)})):s(i)}var w=k;return v(y);})(); ;return Component;

Image

Props#

Props#