astro/packages/integrations/image/components/Picture.astro
Happydev 006405d33c
Refactor Props of Image and Picture component to support type checking (#5788)
* correct props type

* refactor Picture and Image typings

* add missing `alt` property

* add changeset

* apply suggestions

* correct `astro/types` import

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>

* apply suggestions

* convert to type import

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>
2023-01-18 02:41:50 +00:00

45 lines
842 B
Text

---
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} {alt} {...attrs} />
</picture>