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="ds9j6y25lowy"
    :loading="false"
  />
  <CUserAvatar
    user-id="reasd"
    :loading="false"
  />
  <CUserAvatar
    user-id="dfasde"
    :loading="false"
  />
  <CUserAvatar
    user-id="ccsase"
    :loading="false"
  />
  <CUserAvatar
    user-id="zxdqwe"
    :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.

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

Picture

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

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

Props

Prop Default Type
loadingboolean
userId null | string
picture null | string
size'md' "fill" | "md" | "sm" | "lg"