Krys4lide/frontend/components/Avatar.vue

<template>
    <div class="avatar">
        <div class="rounded-full">
            <img :src="getAvatarUrl(user)" />
        </div>
    </div>
</template>

<script setup lang="ts">
    import type { User } from '~/types/user';

    const props = defineProps<{
        user: User,
    }>();

    const getAvatarUrl = (user: User) => {
        if (user.avatar) {
            return user.avatar;
        }
        return 'https://i.pravatar.cc/150?u=' + user.name;
    };
</script>