Best way to pass props and use them in an enhanced:img tag

[twoends]

Hi everyone,
this is what I'm trying to achieve:
Creating a component which I can pass img to and render it lazy loaded with a blurred placeholder while loading.
The example of what I managed to do so far will make it clearer.

The first version of the component (honestly interested about the snippet type comment above all):

<script lang="ts">
	import type { Snippet } from 'svelte';
	import ImageSpinner from '$lib/components/shared/ImageSpinner.svelte';

	type ImageProps = {
		enhanced: Snippet<[() => void]>; // not sure about declaring it this way
		placeholder: Snippet;
	};

	let { enhanced, placeholder }: ImageProps = $props();

	let imageLoaded = $state(false);
	let placeholderDiv: HTMLDivElement;

	const loaded: () => void = () => {
		imageLoaded = true;
		setTimeout(() => {
			placeholderDiv?.remove();
		}, 600);
	};
</script>

<div class="relative w-full h-full z-0">
	<div
		class="absolute inset-0 transition-opacity duration-500 opacity-100 z-30"
		class:!opacity-0={imageLoaded}
		bind:this={placeholderDiv}
	>
		{@render placeholder()}
		<ImageSpinner />
	</div>
	<div class="absolute inset-0 z-10">
		{@render enhanced(loaded)}
	</div>
</div>

How I used it:

<Image>
{#snippet placeholder()}
	<enhanced:img
		class="h-full w-full object-cover object-bottom pointer-events-none"
		src="$lib/assets/background.webp?blur=50"
		alt="Background placeholder"
		fetchpriority="high"
		loading="eager"
	/>
{/snippet}
{#snippet enhanced(loaded: () => void)}
	<enhanced:img
		class="h-full w-full object-cover object-bottom pointer-events-none"
		src="$lib/assets/background.webp?w=3840;3072;2560;1920;1080"
		alt="Background"
		sizes="(min-width:3072px) 3840px, (min-width:2560px) 3072px, (min-width:1920px) 2560px, (min-width:1080px) 1920px, (min-width:768px) 1080px"
		onload={() => loaded()}
	/>
{/snippet}
</Image>

This is working fine but it completely wastes the using of a component since the content must be placed manually everytime instead of passing, for example, the import url.

Second version I tried:
Component:

<script lang="ts">
	import ImageSpinner from '$lib/components/shared/ImageSpinner.svelte';
	import type { Picture } from 'vite-imagetools';

	type ImageProps = {
		image: Picture;
		sizes: string;
		placeholder: Picture;
	};

	let { image, sizes, placeholder }: ImageProps = $props();

	let imageLoaded = $state(false);
	let placeholderDiv: HTMLDivElement;

	const loaded: () => void = () => {
		imageLoaded = true;
		setTimeout(() => {
			placeholderDiv?.remove();
		}, 600);
	};
</script>

<div class="relative w-full h-full z-0">
	<div
		class="absolute inset-0 transition-opacity duration-500 opacity-100 z-30"
		class:!opacity-0={imageLoaded}
		bind:this={placeholderDiv}
	>
		<enhanced:img
			class="h-full w-full object-cover object-bottom pointer-events-none"
			src={placeholder}
			alt="Background placeholder"
			fetchpriority="high"
			loading="eager"
		/>
		<ImageSpinner />
	</div>
	<div class="absolute inset-0 z-10">
		<enhanced:img
			class="h-full w-full object-cover object-bottom pointer-events-none"
			src={image}
			alt="Background"
			{sizes}
			onload={() => loaded()}
		/>
	</div>
</div>

How I use it:

<script lang="ts">
	import Image from '$lib/components/shared/Image.svelte';
	import BackgroundPlaceholder from '$lib/assets/background.webp?enhanced&blur=50';
	import Background from '$lib/assets/background.webp?enhanced&w=3840;3072;2560;1920;1080';
</script>

<Image
  image={Background}
  placeholder={BackgroundPlaceholder}
  sizes="(min-width:3072px) 3840px, (min-width:2560px) 3072px, (min-width:1920px) 2560px, (min-width:1080px) 1920px, (min-width:768px) 1080px"
/>

The second version is working fine too but it's really annoying to import images manually everytime (with svelte complaining about the import Svelte: Cannot find module $lib/ assets/ background. webp?enhanced&blur=50 or its corresponding type declarations. ).

Any suggestion to make this better?
Thanks!

[twoends]

Side note. The only way I found to avoid the Svelte error Svelte: Cannot find module $lib/ assets/ background. webp?enhanced&blur=50 or its corresponding type declarations. is this one:

• Adding this is app.d.ts:

declare global {
	namespace App {
		...
		declare module '*&enhanced' {
			import type { Picture } from 'vite-imagetools';

			const value: Picture;
			export default value;
		}
	}
}

export {};

and placing the "enhanced" query param at the end:
import BackgroundPlaceholder from '$lib/assets/background.webp?blur=50&enhanced';

[eltigerchino]

related #12608