books/src/components/Avatar.vue

<template>
  <div class="rounded-full overflow-hidden" :class="sizeClasses">
    <img
      v-if="imageURL"
      :src="imageURL"
      class="object-cover"
      :class="sizeClasses"
    />
    <div
      v-else
      class="bg-gray-500 flex h-full items-center justify-center text-white w-full text-base uppercase"
    >
      {{ label && label[0] }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Avatar',
  props: {
    imageURL: String,
    label: String,
    size: {
      default: 'md'
    }
  },
  computed: {
    sizeClasses() {
      return {
        sm: 'w-5 h-5',
        md: 'w-7 h-7',
        lg: 'w-9 h-9'
      }[this.size];
    }
  }
};
</script>