SvelteKitの画像最適化ライブラリでつまずいた

はじめに

公式で@sveltejs/enhanced-imgという画像最適化ライブラリが提供されています。
基本的な使用法は公式ドキュメントよりご確認ください。
https://kit.svelte.dev/docs/images

つまずいたこと

最適化された画像を配列のオブジェクトで使いたい時に、TypeError: undefined is not an object が出てしまいました。

エラーが出るコード

+page.svelte

<script>
	import { Section } from '@sveltejs/site-kit/components';
	import pudding from './showcase/pudding.png';
	import pocketbase from './showcase/pocketbase.png';
	import pronauns from './showcase/pronauns.png';
	import pausly from './showcase/pausly.png';

	const showcase = [
		{ url: 'pudding.cool', image: pudding },
		{ url: 'www.pronauns.com', image: pronauns },
		{ url: 'www.pausly.app', image: pausly },
		{ url: 'asm-editor.specy.app', image: asmeditor },
		{ url: 'raster.app', image: raster },
		{ url: 'pocketbase.io', image: pocketbase },
		{ url: 'monogram.io', image: monogram },
		{ url: 'tradingstrategy.ai', image: tradingstrategy }
	];
</script>

<Section --background="var(--background-2)">
	<h2>showcase</h2>

	<div class="showcase">
		{#each showcase as { url, image }}
			<a href="https://{url}" target="_blank" rel="noreferrer">
				<enhanced:img src={image} alt="" style="width:100%; height:100%; object-fit:cover" />
				<span>{url}</span>
			</a>
		{/each}
	</div>
</Section>

※ コードは公式の GitHub から引用しています。

解決方法

エラーの原因はすごく単純で、画像のパスの後ろに ?enhanced が必須だったようです。。

+page.svelte

import pudding from './showcase/pudding.png?enhanced';
import pocketbase from './showcase/pocketbase.png?enhanced';
import pronauns from './showcase/pronauns.png?enhanced';
import pausly from './showcase/pausly.png?enhanced';

コーディングしているときにいつの間にか消していました。

解決したコードの全体

+page.svelte

<script>
	import { Section } from '@sveltejs/site-kit/components';
	import pudding from './showcase/pudding.png?enhanced';
	import pocketbase from './showcase/pocketbase.png?enhanced';
	import pronauns from './showcase/pronauns.png?enhanced';
	import pausly from './showcase/pausly.png?enhanced';

	const showcase = [
		{ url: 'pudding.cool', image: pudding },
		{ url: 'www.pronauns.com', image: pronauns },
		{ url: 'www.pausly.app', image: pausly },
		{ url: 'asm-editor.specy.app', image: asmeditor },
		{ url: 'raster.app', image: raster },
		{ url: 'pocketbase.io', image: pocketbase },
		{ url: 'monogram.io', image: monogram },
		{ url: 'tradingstrategy.ai', image: tradingstrategy }
	];
</script>

<Section --background="var(--background-2)">
	<h2>showcase</h2>

	<div class="showcase">
		{#each showcase as { url, image }}
			<a href="https://{url}" target="_blank" rel="noreferrer">
				<enhanced:img src={image} alt="" style="width:100%; height:100%; object-fit:cover" />
				<span>{url}</span>
			</a>
		{/each}
	</div>
</Section>

※ コードは公式の GitHub から引用しています。