아바타

아바타 (Avatar)

아바타는 사용자를 나타내는 이미지 요소에, 이미지가 로드되지 않거나 없을 때 보여줄 폴백(대체 표시)을 갖춘 컴포넌트예요. 프로필 사진처럼 URL로 이미지를 보여주되, 이미지가 없거나 깨졌을 때는 이니셜 같은 폴백을 자연스럽게 표시하고 싶을 때 사용해요.

출처: 문서

init 명령으로 프로젝트를 초기화했다면, 다음 명령어로 아바타 컴포넌트를 바로 추가할 수 있어요.

CLI Manual

npx shadcn@latest add avatar

다음 의존성을 설치해 주세요.

npm install @radix-ui/react-avatar

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

AvatarImage에 이미지 주소를, AvatarFallback에 이미지가 없을 때 보여줄 텍스트(예: 이니셜)를 넣으면 돼요.

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>