app_vue2/components/Ui/Image.vue

<template>
  <main>
    <div class="image-wrapper" :style="{width:width + 'px'}">
      <v-img
        :src="imgSrcReload ? imgSrcReload : imageLoaded"
        :lazy-src="require(`/assets/images/byDefault/${imageByDefault}`)"
        :height="height"
        :width="width"
        aspect-ratio="1"
      >
        <template #placeholder>
          <v-row
            class="fill-height ma-0"
            align="center"
            justify="center"
          >
            <v-progress-circular
              indeterminate
              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="fetch();openUpload=false"
          @reset="reset"
        ></UiInputImage>
      </div>
    </div>
  </main>
</template>


<script lang="ts">
import {defineComponent, onUnmounted, ref, Ref, useContext, watch} from '@nuxtjs/composition-api'
import {useImageProvider} from "~/composables/data/useImageProvider";
import {WatchStopHandle} from "@vue/composition-api";

export default defineComponent({
  props: {
    id: {
      type: Number,
      required: false
    },
    field: {
      type: String,
      required: false
    },
    imageByDefault: {
      type: String,
      required: false,
      default: 'default_pic.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,
  setup(props) {
    const openUpload: Ref<Boolean> = ref(false)
    const imgSrcReload: Ref<any> = ref(null)
    const {$dataProvider, $config} = useContext()
    const {getOne, provideImg} = useImageProvider($dataProvider, $config)

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

    /**
     * Quand on souhaite faire un reset de l'image
     */
    const reset = () => {
      imgSrcReload.value = null
      imageLoaded.value = require(`assets/images/byDefault/${props.imageByDefault}`)
      openUpload.value = false
    }

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

    return {
      imgSrcReload,
      imageLoaded,
      openUpload,
      fetch,
      reset
    }
  }
})
</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>