sveltekit/packages/enhanced-img/test/Output.svelte at c1ea90a87941c2b01d82ba28e7fd7d35e3b21888 · ottomated/sveltekit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<script lang="ts">
	import ___ASSET___0 from "./foo.svg";

	import manual_image1 from './no.png';

	import manual_image2 from './no.svg';

	const images = [manual_image1, manual_image2];

	let foo: string = 'bar';
</script>

{foo}

<img src="./foo.png" alt="non-enhanced test" />

<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" alt="basic test" width=1440 height=1440 /></picture>

<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" width="5" height="10" alt="dimensions test" width=1440 height=1440 /></picture>

<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" alt="directive test" width=1440 height=1440 /></picture>

<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" {...{ foo }} alt="spread attributes test" width=1440 height=1440 /></picture>

<picture><source srcset={"/1 1440w, /2 960w"} sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/avif" /><source srcset={"/3 1440w, /4 960w"} sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/webp" /><source srcset={"5 1440w, /6 960w"} sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/png" /><img src="/7" alt="sizes test" width=1440 height=1440 /></picture>

<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" on:click={(foo = 'clicked an image!')} alt="event handler test" width=1440 height=1440 /></picture>

<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" alt="alias test" width=1440 height=1440 /></picture>

<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" alt="absolute path test" width=1440 height=1440 /></picture>

<img src={___ASSET___0} alt="svg test" />

{#each images as image}
	{#if typeof image === 'string'}
	<img src={image.img.src} alt="opt-in test" width={image.img.w} height={image.img.h} />
{:else}
	<picture>
		{#each Object.entries(image.sources) as [format, srcset]}
			<source {srcset} type={'image/' + format} />
		{/each}
		<img src={image.img.src} alt="opt-in test" width={image.img.w} height={image.img.h} />
	</picture>
{/if}
{/each}

<picture>
	<source src="./foo.avif" />
	<source srcset="./foo.avif 500v ./bar.avif 100v" />
	<source srcset="./foo.avif, ./bar.avif 1v" />
</picture>