42 lines
814 B
Vue
42 lines
814 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>
|