app/composables/data/useImageFetch.ts

import {useAsyncData, AsyncData, useFetch, FetchResult} from "#app";
import {useImageManager} from "~/composables/data/useImageManager";
import {ref, Ref} from "@vue/reactivity";

interface useImageFetchReturnType {
    fetch: (id: number | null, defaultImage?: string, height?: number, width?: number) => FetchResult<any>
}

export const useImageFetch = (lazy: boolean = false): useImageFetchReturnType => {
    const { imageManager } = useImageManager()

    const fetch = (
        id: number | null,  // If id is null, fetch shall return the default value
        defaultImage: string = '',
        height: number = 0,
        width: number = 0
    ): FetchResult<any> => useFetch(
        // @ts-ignore
        async () => {
            const image: Ref<String> = ref(defaultImage ? `assets/images/byDefault/${defaultImage}` : '')

            if (id !== null) {
                try {
                    image.value = await imageManager.get(id, height, width)
                } catch (e) {
                    console.error(e)
                }
            }

            return image
        }
    )

    return { fetch }
}