app/components/Ui/Image.vue

<!--
Composant Image permettant d'afficher une image stockée sur les serveurs Opentalent à partir de son id.
Permet d'afficher une image par défaut si l'image demandée n'est pas disponible ou invalide.
-->
<template>
  <main>
    <div class="image-wrapper" :style="{width: width + 'px'}">
      <v-img
        :src="imageSrc"
        :lazy-src="defaultImagePath"
        :height="height"
        :width="width"
        aspect-ratio="1"
      >
        <template #placeholder>
          <v-row
            class="fill-height ma-0"
            align="center"
            justify="center"
            v-if="pending"
          >
            <v-progress-circular
              :indeterminate="true"
              color="neutral"
            />
          </v-row>
        </template>

        <div v-if="!pending && overlayIcon" class="overlay" @click="emit('overlay-clicked')">
          <v-icon>{{ overlayIcon }}</v-icon>
        </div>
      </v-img>
    </div>
  </main>
</template>

<script setup lang="ts">
import {useImageFetch} from "~/composables/data/useImageFetch";
import ImageManager from "~/services/data/imageManager";

const props = defineProps({
  /**
   * Id de l'image (null si aucune)
   */
  imageId: {
    type: Number as PropType<number | null>,
    required: false,
    default: null
  },
  /**
   * Image par défaut
   */
  defaultImage: {
    type: String,
    required: false
  },
  /**
   * Hauteur de l'image à l'écran (en px)
   */
  height: {
    type: Number,
    required: false
  },
  /**
   * Largeur de l'image à l'écran (en px)
   */
  width: {
    type: Number,
    required: false
  },
  /**
   * Icône à afficher en overlay au survol de la souris
   */
  overlayIcon: {
    type: String,
    required: false,
    default: null
  }
})

const { fetch } = useImageFetch()

const defaultImagePath = props.defaultImage ?? ImageManager.defaultImage

const { data: imageSrc, pending, refresh: refreshImage } = fetch(props.imageId ?? null, defaultImagePath, props.height, props.width) as any


const emit = defineEmits(['overlay-clicked'])

/**
 * Si l'id change, on recharge l'image
 */
const unwatch: WatchStopHandle = watch(() => props.imageId, async () => {
  await refreshImage()
})

const refresh = () => {
  refreshImage()
}

defineExpose({ refresh })

/**
 * Lorsqu'on démonte le component, on supprime le watcher
 */
onUnmounted(() => {
  unwatch()
})
</script>

<style lang="scss">
  div.image-wrapper {
    display: block;
    position: relative;

    img {
      display: block;
      max-width: 100%;
    }

    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: .3s ease;
    }
    .overlay:hover {
      opacity: 0.8;
      background-color: rgb(var(--v-theme-neutral-strong));
      cursor: pointer;
    }

    .overlay .v-icon {
      color: rgb(var(--v-theme-on-neutral-strong));
      font-size: 36px;
    }
  }
</style>