Avatar (头像)

<script setup lang="ts">
import type { KunUser } from '@kungal/ui-vue'

// Any image URL works — a local/public asset (here the site icon), a remote CDN
// image, or the deterministic sticker fallback when `avatar` is omitted.
const avatar = '/favicon.webp'
const user: KunUser = { id: 1, name: 'Kun', avatar }
</script>

<template>
  <KunAvatar :user="user" :is-navigation="false" />
</template>

<script setup lang="ts">
import type { KunUser } from '@kungal/ui-vue'

const avatar = '/favicon.webp'
const user: KunUser = { id: 1, name: 'Kun', avatar }
</script>

<template>
  <KunAvatar :user="user" :is-navigation="false" size="xs" />
  <KunAvatar :user="user" :is-navigation="false" size="sm" />
  <KunAvatar :user="user" :is-navigation="false" size="md" />
  <KunAvatar :user="user" :is-navigation="false" size="lg" />
  <KunAvatar :user="user" :is-navigation="false" size="xl" />
  <KunAvatar :user="user" :is-navigation="false" size="original-sm" />
  <KunAvatar :user="user" :is-navigation="false" size="original" />
</template>

<script setup lang="ts">
import type { KunUser } from '@kungal/ui-vue'

// No `avatar` URL → KunAvatar picks from `avatarFallbackPool`, hashed on the
// name, so the same unknown user always gets the same picture. The pool is HOST
// config: leave it unset and all three of these render the identical bundled
// fallback instead. This site configures it in app/plugins/kun-avatar-pool.ts.
const alice: KunUser = { id: 1, name: 'Alice', avatar: '' }
const bob: KunUser = { id: 2, name: 'Bob', avatar: '' }
const carol: KunUser = { id: 3, name: 'Carol', avatar: '' }
</script>

<template>
  <KunAvatar :user="alice" :is-navigation="false" size="lg" />
  <KunAvatar :user="bob" :is-navigation="false" size="lg" />
  <KunAvatar :user="carol" :is-navigation="false" size="lg" />
</template>

<script setup lang="ts">
import type { KunUser } from '@kungal/ui-vue'

const avatar = '/favicon.webp'

// With `isNavigation` (the default) and a user that has an `id`, the avatar
// renders a real, crawlable link to the user's profile and scales on hover.
const user: KunUser = { id: 42, name: 'Kun', avatar }
</script>

<template>
  <KunAvatar :user="user" size="lg" />
</template>