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
|
---
import { getPicture } from '../dist/index.js';
import { warnForMissingAlt } from './index.js';
import type { PictureComponentLocalImageProps, PictureComponentRemoteImageProps } from './index.js';
import type { GetPictureResult } from '../src/lib/get-picture.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 }: GetPictureResult = 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>
|
