PersonAvatar.vue

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useKeycloakStore } from '@/@core/stores/keycloakStore'

import profileImg from '@images/avatars/avatar-1.png'

const keycloakStore = useKeycloakStore()

const avatarUrl = ref(profileImg) // default fallback as initial value

async function checkImageExists(url: string) {
  return new Promise(resolve => {
    const img = new Image()
    img.onload = () => resolve(true)
    img.onerror = () => resolve(false)
    img.src = url
  })
}

onMounted(async () => {
  if (keycloakStore.kodeIdentitas) {
    const imageUrl = `https://api.ui.ac.id/public/photo/${keycloakStore.kodeIdentitas}.jpg`
    const exists = await checkImageExists(imageUrl)
    if (exists)
      avatarUrl.value = imageUrl
  }
})
</script>

<template>
  <VAvatar
    :image="avatarUrl"
    height="120"
    width="120"
  />
</template>