flaschengeist-frontend/api/components/UserAvatar.vue

<template>
  <q-avatar>
    <slot :avatarURL="avatarURL(modelValue)">
      <q-img :src="avatarURL(modelValue)" style="min-width: 100%; min-height: 100%">
        <template #error>
          <img :src="fallback" style="height: 100%" />
        </template>
      </q-img>
    </slot>
  </q-avatar>
</template>

<script lang="ts">
import { PropType, defineComponent } from 'vue';
import { avatarURL } from '@flaschengeist/api';

/**
 * Display an avatar for an user
 *
 * Slots:
 *  default - scope: {avatarURL}
 */
export default defineComponent({
  name: 'UserAvatar',
  props: {
    modelValue: {
      type: [Object, String] as PropType<FG.User | string>,
      required: true,
    },
    showZoom: {
      type: Boolean,
      default: false,
    },
    fallback: {
      type: String,
      default: 'no-image.svg',
    },
  },
  emits: ['error'],
  setup() {
    return {
      avatarURL,
    };
  },
});
</script>