app/components/Ui/Image.vue

<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="grey lighten-1"
            />
          </v-row>
        </template>
      </v-img>

      <div>
        <div v-if="upload" class="click-action hover" @click="openUpload=true"><v-icon>mdi-upload</v-icon></div>
        <UiInputImage
          v-if="openUpload"
          @close="openUpload=false"
          :existingImageId="id"
          :field="field"
          :ownerId="ownerId"
          @update="$emit('update', $event, field); openUpload=false"
          @reload="onReload"
          @reset="reset"
        ></UiInputImage>
      </div>
    </div>
  </main>
</template>


<script setup lang="ts">
import {ref, Ref} from "@vue/reactivity";
import {useContext} from "unctx";
import {useNuxtApp} from "#app";
import {useImageFetch} from "~/composables/data/useImageFetch";
import {onUnmounted, watch, WatchStopHandle} from "@vue/runtime-core";
import {useImageManager} from "~/composables/data/useImageManager";

const props = defineProps({
  id: {
    type: Number,
    required: true,
    default: null
  },
  field: {
    type: String,
    required: false
  },
  defaultImage: {
    type: String,
    required: false
  },
  height: {
    type: Number,
    required: false
  },
  width: {
    type: Number,
    required: false
  },
  upload: {
    type: Boolean,
    required: false,
    default: false
  },
  ownerId:{
    type: Number,
    required: false
  }
})

const { imageManager } = useImageManager()
const { fetch } = useImageFetch()

const defaultImagePath = props.defaultImage ?? imageManager.defaultImage

const openUpload: Ref<Boolean> = ref(false)

const imageSrc: Ref<string | null> = ref(null)
let pending = ref(true)

const fetchImage = async () => {
  pending.value = true
  imageSrc.value = await imageManager.get(props.id ?? null, defaultImagePath, props.height, props.width)
  pending.value = false
}

onMounted(
    () => {
      fetchImage()
    }
)

const unwatch: WatchStopHandle = watch(() => props.id, async (newValue, oldValue) => {
  await fetchImage()
})

const onReload = async () => {
  await fetchImage()
  openUpload.value = false
}

/**
 * Quand on souhaite faire un reset de l'image
 */
const reset = () => {
  imageSrc.value = defaultImagePath
  openUpload.value = false
}

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

<style lang="scss">
  div.image-wrapper {
    display: block;
    position: relative;
    img{
      max-width: 100%;
    }
    .click-action{
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height: 100%;
      background: transparent;
      opacity: 0;
      transition: all .2s;
      &:hover{
        opacity: 1;
        background:rgba(0,0,0,0.3);
        cursor: pointer;
      }
      i{
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50% , -50%);
        font-size: 50px;
        z-index: 1;
        opacity: 1;
        &:hover{
          color: rgba(#3fb37f, 0.7);
        }
      }
    }
  }
</style>