<template>
|
<nut-avatar class="pro-avatar">
|
<!-- <img :class="['avatar-img', imgClass]" :src="_src" /> -->
|
<div class="avatar-img-div" :style="{ backgroundImage: `url(${_src})` }"></div>
|
</nut-avatar>
|
</template>
|
|
<script setup lang="ts">
|
import DefaultAvatar from '@/assets/components/icon-default-avatar.png';
|
import { computed } from 'vue';
|
|
defineOptions({
|
name: 'Avatar',
|
});
|
|
type Props = {
|
imgClass?: string;
|
src?: string;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {});
|
|
const _src = computed(() => props.src || DefaultAvatar);
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.avatar-img {
|
object-fit: cover;
|
}
|
|
.pro-avatar {
|
overflow: hidden;
|
}
|
|
.avatar-img-div {
|
width: 100%;
|
height: 100%;
|
background-size: cover;
|
background-position: center;
|
}
|
</style>
|
