app/components/Ui/Image.vue

<template>
  <main>
    <div class="image-wrapper" :style="{width: width + 'px'}">
      <v-img
        :src="imgSrcReload ? imgSrcReload : image"
        :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-progress-circular>
          </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";

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

// fetchOnServer: false,  // TODO: je ne sais pas encore par quoi remplacer ça...

if (!props.id) {
  throw new Error("Image's id is missing")
}

const defaultImagePath = `/images/default/${props.defaultImage}`

const openUpload: Ref<Boolean> = ref(false)
const imgSrcReload: Ref<any> = ref(null)
const { $config } = useNuxtApp()

const { fetch } = useImageFetch()


const { data: image, pending } = fetch(props.id, props.defaultImage, props.height, props.width)

const unwatch: WatchStopHandle = watch(() => props.id, async (newValue, oldValue) => {
  imgSrcReload.value = await fetch(newValue as number, props.defaultImage, props.height, props.width)
})

const onReload = () => {
  fetch()
  openUpload.value = false
}

/**
 * Quand on souhaite faire un reset de l'image
 */
const reset = () => {
  imgSrcReload.value = null
  image.value = require(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>