astro/packages/integrations/image/components/Picture.astro
Tony Sullivan ef9345767b
WIP: [image] Fixing SSR support and improving error validation (#4013)
* fix: SSR builds were hitting an undefined error and skipping the step for copying original assets

* chore: update lockfile

* chore: adding better error validation to getImage and getPicture

* refactor: cleaning up index.ts

* refactor: moving SSG build generation logic out of the integration

* splitting build to ssg & ssr helpers, re-enabling SSR image build tests

* sharp should automatically rotate based on EXIF

* cleaning up how static images are tracked for SSG builds

* undo unrelated mod.d.ts change

* chore: add changeset
2022-07-22 23:01:56 +00:00

39 lines
1.3 KiB
Text

---
import { getPicture } from '../dist/index.js';
import type { ImageAttributes, ImageMetadata, OutputFormat, PictureAttributes, TransformOptions } from '../dist/types';
export interface LocalImageProps extends Omit<PictureAttributes, 'src' | 'width' | 'height'>, Omit<TransformOptions, 'src'>, Pick<ImageAttributes, 'loading' | 'decoding'> {
src: ImageMetadata | Promise<{ default: ImageMetadata }>;
alt?: string;
sizes: HTMLImageElement['sizes'];
widths: number[];
formats?: OutputFormat[];
}
export interface RemoteImageProps extends Omit<PictureAttributes, 'src' | 'width' | 'height'>, TransformOptions, Pick<ImageAttributes, 'loading' | 'decoding'> {
src: string;
alt?: string;
sizes: HTMLImageElement['sizes'];
widths: number[];
aspectRatio: TransformOptions['aspectRatio'];
formats?: OutputFormat[];
}
export type Props = LocalImageProps | RemoteImageProps;
const { src, alt, sizes, widths, aspectRatio, formats = ['avif', 'webp'], loading = 'lazy', decoding = 'async', ...attrs } = Astro.props as Props;
const { image, sources } = await getPicture({ src, widths, formats, aspectRatio });
---
<picture {...attrs}>
{sources.map(attrs => (
<source {...attrs} {sizes}>))}
<img {...image} {loading} {decoding} {alt} />
</picture>
<style>
img {
content-visibility: auto;
}
</style>