TUI

<template>
  <div class="component-card-demo-wrap">
    <TsAvatar />
    <TsAvatar shape="square" />
    <TsAvatar :error="true" fallback="加载失败" />
    <TsAvatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e5bcpng.png" fallback="加载失败" />
    <TsAvatar src="https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg" />
  </div>
</template>

<script setup lang="ts">
import { TsAvatar } from 'tui';
</script>

<template>
  <div class="component-card-demo-wrap" style="align-items: flex-end">
    <TsAvatar shape="square" size="mini" />
    <TsAvatar shape="square" size="small" />
    <TsAvatar shape="square" size="medium" />
    <TsAvatar shape="square" size="large" />
    <TsAvatar shape="square" size="x-large" />
    <TsAvatar shape="square" :size="80" />
    <TsAvatar shape="square" :size="96" />
    <TsAvatar shape="square" :size="128" src="https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg" />
  </div>
</template>

<script setup lang="ts">
import { TsAvatar } from 'tui';
</script>

<template>
  <div class="component-card-demo-wrap" style="align-items: flex-end">
    <TsAvatar shape="square" :size="80" fit="cover" src="https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg" />
    <TsAvatar shape="square" :size="80" fit="contain" src="https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg" />
    <TsAvatar shape="square" :size="80" fit="fill" src="https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg" />
  </div>
</template>

<script setup lang="ts">
import { TsAvatar } from 'tui';
</script>

<template>
  <div class="component-card-demo-wrap" style="align-items: flex-end">
    <TsAvatar shape="square" :size="80" bg="#eee" />
    <TsAvatar shape="square" :size="80" :borderRadius="12" src="https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg" />
  </div>
</template>

<script setup lang="ts">
import { TsAvatar } from 'tui';
</script>