4dkankan-components/docs/examples/avatar/types.vue

<template>
    <div class="demo-type">
        <div>
            <el-avatar :icon="UserFilled" />
        </div>
        <div>
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
        </div>
        <div>
            <el-avatar> user </el-avatar>
        </div>
    </div>
</template>

<script setup lang="ts">
import { UserFilled } from '@element-plus/icons-vue'
</script>

<style scoped>
.demo-type {
    display: flex;
}
.demo-type > div {
    flex: 1;
    text-align: center;
}

.demo-type > div:not(:last-child) {
    border-right: 1px solid var(--el-border-color);
}
</style>