astro/packages/integrations/image/components/Picture.astro

---
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>