Imagemedia

Fixed-ratio image with a loading skeleton, an error fallback slot, lazy loading by default and no hover scaling.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/image

의존 아이템locale skeleton style

Default

image-demo.tsx

import { Image } from "@/components/ui/image";
const photo = `data:image/svg+xml;utf8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360"><rect width="640" height="360" fill="#2980b9"/></svg>')}`;
export default function ImageDemo() {  return (    <div className="grid max-w-md gap-4">      <Image src={photo} alt="Ocean view room" ratio={16 / 9} />      <Image src="data:image/png;base64,broken" alt="Broken photo" ratio={4 / 3} />    </div>  );}