trouble using import.meta.glob with @sveltejs/enhanced-img

[UltraCakeBakery]

Describe the problem

When using import.meta.glob as desribed in the docs, there is no way to then easily generate a <picture> elements from its output, which I need this for SSR / prerendering.

I was planning on doing something like this, but unfortunately this does not magically work:

// $lib/utils.js
const images = import.meta.glob(
	'../assets/employees/**/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp,svg}',
	{
		query: {
			enhanced: true
		}
	}
)

export async function get_image(employee, path) {
	const images_entries = Object.entries(images)
	const found = images_entries.find(
		([file_path]) =>
			file_path.includes(employee) && file_path.endsWith(path)
	)

	if (found) return await found[1]()
}

<!-- +page.svelte -->
<script>
import { get_image } from '$lib/utils.js'
</script>

<enhanced:img src={get_image('jack', 'profile-banner.png')} />

Describe the proposed solution

First I thought of suggesting the <Img/> component again, but it is probably sufficient if the package exposed whatever code generates the final picture html code.

<script>
import { generate_picture_html } from `@sveltejs/enhanced-img`
import { get_image } from '$lib/utils.js'
</script>

{@html generate_picture_html(get_image( 'jack', '/picture.png'))}

Alternatives considered

Some crazy shit like importing every asset for every employee one by one, map the imports in an object and then return whatever value vite generates when doing that so enhanced:img can parse it during prerendering and stuff

Importance

i cannot use SvelteKit without it

Additional Information

No response

[benmccann]

You have a number of bugs in your code:

file_fath.includes(employee) && file_path.endsWith(path)

I think you mean file_path rather than file_fath

<enhanced:img src={get_image('jack', 'profile-banner.png')

You're missing } /> at the end. Also, get_image is async so needs to be awaited

[UltraCakeBakery]

You have a number of bugs in your code:

file_fath.includes(employee) && file_path.endsWith(path)

I think you mean file_path rather than file_fath

<enhanced:img src={get_image('jack', 'profile-banner.png')

You're missing } /> at the end. Also, get_image is async so needs to be awaited

I apologize for the typos in the code; my pseudocode often goes unchecked. I'll update the original issue. Regarding the async function, I'm unsure how to handle returning a promise since found[1] in the get_image function is a promise. I want to ensure SSR compatibility, but with how Vite currently operates (as far as I understand), my proposed generate_picture_html function might not be sufficient as there is no way to not end up with a promise at this point?

I'm uncertain about what feature to request at this point. Perhaps a change in the documentation? I'm not sure.

[benmccann]

If you use the eager option with import.meta.glob then you won't end up with a promise.

[UltraCakeBakery]

If you use the eager option with import.meta.glob then you won't end up with a promise.

Sweet! I will give that a try. Thank you for looking into this and the added clarification in the docs PR! I'll let the PR merge auto close this issue; but feel free to close it already if that suits you better.