summaryrefslogtreecommitdiff
path: root/packages/integrations/image/components/Picture.astro
blob: f8958f8fea97b04bf2fb928ddc6eaf1619ff2faf (plain) (blame)
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
---
import { getPicture } from '../dist/index.js';
import { warnForMissingAlt } from './index.js';
import type { PictureComponentLocalImageProps, PictureComponentRemoteImageProps } from './index.js';

export type Props = PictureComponentLocalImageProps | PictureComponentRemoteImageProps;

const {
	src,
	alt,
	sizes,
	widths,
	aspectRatio,
	fit,
	background,
	position,
	formats = ['avif', 'webp'],
	loading = 'lazy',
	decoding = 'async',
	...attrs
} = Astro.props;

if (alt === undefined || alt === null) {
	warnForMissingAlt();
}

const { image, sources } = await getPicture({
	src,
	widths,
	formats,
	aspectRatio,
	fit,
	background,
	position,
	alt,
});

delete image.width;
delete image.height;
---

<picture>
	{sources.map((attrs) => <source {...attrs} {sizes} />)}
	<img {...image} {loading} {decoding} {...attrs} />
</picture>