diff --git a/.changeset/breezy-roses-smash.md b/.changeset/breezy-roses-smash.md new file mode 100644 index 000000000..59ec9a17d --- /dev/null +++ b/.changeset/breezy-roses-smash.md @@ -0,0 +1,5 @@ +--- +'@astrojs/image': patch +--- + +Make sizes prop optional on Image component diff --git a/packages/integrations/image/components/Picture.astro b/packages/integrations/image/components/Picture.astro index f8958f8fe..bdaaceae0 100644 --- a/packages/integrations/image/components/Picture.astro +++ b/packages/integrations/image/components/Picture.astro @@ -2,6 +2,7 @@ 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; @@ -24,7 +25,7 @@ if (alt === undefined || alt === null) { warnForMissingAlt(); } -const { image, sources } = await getPicture({ +const { image, sources }: GetPictureResult = await getPicture({ src, widths, formats, diff --git a/packages/integrations/image/components/index.ts b/packages/integrations/image/components/index.ts index 2ca557656..3135e0e21 100644 --- a/packages/integrations/image/components/index.ts +++ b/packages/integrations/image/components/index.ts @@ -31,8 +31,8 @@ export interface PictureComponentLocalImageProps src: ImageMetadata | Promise<{ default: ImageMetadata }>; /** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */ alt: string; - sizes: HTMLImageElement['sizes']; widths: number[]; + sizes?: HTMLImageElement['sizes']; formats?: OutputFormat[]; } @@ -43,9 +43,9 @@ export interface PictureComponentRemoteImageProps src: string; /** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */ alt: string; - sizes: HTMLImageElement['sizes']; widths: number[]; aspectRatio: TransformOptions['aspectRatio']; + sizes?: HTMLImageElement['sizes']; formats?: OutputFormat[]; background?: TransformOptions['background']; }