app_vue2/components/Ui/Image.vue

<template>
  <main>
    <v-img
      :src="imageLoaded"
      :lazy-src="require(`/assets/images/byDefault/${imageByDefault}`)"
      :min-height="height"
      :min-width="width"
      aspect-ratio="1"
    >
      <template v-slot: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>
  </main>
</template>


<script lang="ts">
import {defineComponent, ref, Ref, useContext, useFetch} from '@nuxtjs/composition-api'
import {QUERY_TYPE} from "~/types/enums";

export default defineComponent({
  props: {
    id: {
      type: Number,
      required: false
    },
    imageByDefault: {
      type: String,
      required: false,
      default: 'default_pic.jpeg'
    },
    height: {
      type: Number,
      required: false,
      default: 0
    },
    width: {
      type: Number,
      required: false,
      default: 0
    }
  },
  fetchOnServer: false,
  setup(props) {
    const {$dataProvider, $config} = useContext()
    const imageLoaded: Ref<String> = ref('')

    useFetch(async () => {
        try{
          if(props.id){
            imageLoaded.value = await $dataProvider.invoke({
              type: QUERY_TYPE.IMAGE,
              baseUrl: $config.baseURL_Legacy,
              imgArgs: {
                id: props.id,
                height: props.height,
                width: props.width
              }
            })
          }else
            throw new Error('id is null')
        }catch (e){
          imageLoaded.value = require(`/assets/images/byDefault/${props.imageByDefault}`)
        }
      }
    )

    return {
      imageLoaded
    }
  }
})
</script>