User Avatar

Display a user avatar with a generated color block or image url.

Usage

Show a user's profile image using the picture prop or a generated color block based on the id prop.

<template>
  <CUserAvatar
    user-id="123"
    :loading="false"
  />
</template>

Loading

Use the loading boolean prop to render a loading state.

<template>
<CUserAvatar user-id="124" loading />
</template>

Size

Use the size prop to adjust avatar size.

size

<template>
<CUserAvatar user-id="909" size="lg" />
</template>

Picture

Use the picture prop to pass an image url to the component.

picture

<template>
<CUserAvatar picture="https://upload.wikimedia.org/wikipedia/commons/d/dc/Steve_Jobs_Headshot_2010-CROP_%28cropped_2%29.jpg" />
</template>

Props

size

"fill" | "md" | "sm" | "lg"

"md"

userId

string

picture

string

boolean