<template>
  <img
      :src="blobUrl"
      :alt="alt"
  >

</template>

<style scoped>
</style>

<script setup lang="ts">
import { ref, watch } from "vue";
import { ImageService } from "../services/image-service";

const props = defineProps<{
  gameId: string
  src: string
  alt: string
}>();

const blobUrl = ref<string | null>(null);

watch(() => [props.src, props.gameId], async ([newUrl, key]) => {
  blobUrl.value = await ImageService.getImage(key, newUrl);
}, { immediate: true });
</script>