tethys.backend/resources/js/Components/UserAvatar.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>