How can I use enhanced:img with Vite import.glob.meta and typescript?

[keltonhalbert]

I'm attempting to use enhanced:img with my project, ideally by using import.meta.glob to dynamically import my images from a folder, rather than hard-coding entries for each item as I update the page over time. This may be the wrong way to do it, but I wrote this +page.ts loader for my route that appears to do what I want. However, the type of mod is Promise<unknown>, making it really hard (or entirely unsuccessful at the moment) to properly type the data when passing it to some Svelte components.

1. Is there a trick to getting the Vite types to play nicely here? I'm using sveltePreprocess in my svelte.config.js.
2. Is this even the correct way to do this, or is there a better way that resolves this + the typing issue?

I'm relatively new to Svelte/Sveltekit and fumbling in the dark, so any help is greatly appreciated :).

import type { PageLoad } from './$types';

export const load: PageLoad = async ({}) => {
    const all_image_files = import.meta.glob(
        '$lib/assets/portfolio/*.jpg',
        {
            query: {
                enhanced: true,
                format: "jpg",
            },
        }
    );

    let imgs = await Promise.all(
        Object.values(all_image_files).map( async im => {
            const mod = await im();
            return mod.default;
        })
    );

    return {
        images:  imgs
    };
};

[kapitalisman]

I have a separate $lib file with these contents:

type Image = {
	sources: {
		avif: string
		webp: string
		png: string
	}
	img: {
		src: string
		w: number
		h: number
	}
}

export const images = import.meta.glob<Image>('$lib/assets/images/*.{jpg,jpeg,png}', {
	query: { enhanced: true },
	import: 'default',
	eager: true
})

Then I can import images anywhere I want to use them, and also dynamically pick one using images[path] as src.

<enhanced:img src={images[path]} alt="alt" />.

[cocoliliace]

It seems that the src attribute in enhanced:img requires a string in typescript, even though it works even if we pass in an Image. This code works but when I run pnpm check, I get

Error: Type 'Image' is not assignable to type 'string'. (js)

Did you get the same thing? How did you resolve it?