diff --git a/.changeset/chatty-bikes-sin.md b/.changeset/chatty-bikes-sin.md new file mode 100644 index 000000000000..99d999bda7b8 --- /dev/null +++ b/.changeset/chatty-bikes-sin.md @@ -0,0 +1,5 @@ +--- +'@astrojs/image': patch +--- + +Updates the component to pass the `alt` attribute down to the element diff --git a/packages/integrations/image/README.md b/packages/integrations/image/README.md index ee9fdf3c92a5..fef238891b26 100644 --- a/packages/integrations/image/README.md +++ b/packages/integrations/image/README.md @@ -188,13 +188,13 @@ const imageUrl = 'https://www.google.com/images/branding/googlelogo/2x/googlelog --- // Local image with multiple sizes - + // Remote image (aspect ratio is required) - + // Inlined imports are supported - + ``` diff --git a/packages/integrations/image/components/Picture.astro b/packages/integrations/image/components/Picture.astro index fb1f1e2bd214..bff6aad89491 100644 --- a/packages/integrations/image/components/Picture.astro +++ b/packages/integrations/image/components/Picture.astro @@ -4,15 +4,17 @@ import loader from 'virtual:image-loader'; import { getPicture } from '../src/get-picture.js'; import type { ImageAttributes, ImageMetadata, OutputFormat, PictureAttributes, TransformOptions } from '../src/types.js'; -export interface LocalImageProps extends Omit, Omit, Omit { +export interface LocalImageProps extends Omit, Omit, Pick { src: ImageMetadata | Promise<{ default: ImageMetadata }>; + alt?: string; sizes: HTMLImageElement['sizes']; widths: number[]; formats?: OutputFormat[]; } -export interface RemoteImageProps extends Omit, TransformOptions, Omit { +export interface RemoteImageProps extends Omit, TransformOptions, Pick { src: string; + alt?: string; sizes: HTMLImageElement['sizes']; widths: number[]; aspectRatio: TransformOptions['aspectRatio']; @@ -21,7 +23,7 @@ export interface RemoteImageProps extends Omit {sources.map(attrs => ( ))} - +