forked from geolba/tethys.backend
38 lines
885 B
Vue
38 lines
885 B
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
username: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
avatar: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
api: {
|
|
type: String,
|
|
default: 'avataaars',
|
|
},
|
|
});
|
|
|
|
const avatar = computed(
|
|
// () => props.avatar ?? `https://avatars.dicebear.com/api/${props.api}/${props.username?.replace(/[^a-z0-9]+/i, '-')}.svg`
|
|
|
|
() => props.avatar ?? `https://avatars.dicebear.com/api/initials/${props.username}.svg`,
|
|
|
|
// () => {
|
|
|
|
// return props.avatar ?? `https://www.gravatar.com/avatar/${props.username}?s=50`;
|
|
// }
|
|
);
|
|
|
|
const username = computed(() => props.username);
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<img :src="avatar" :alt="username" class="rounded-full block h-auto w-full max-w-full bg-gray-100 dark:bg-slate-800" />
|
|
</div>
|
|
</template>
|