{"record":{"id":"de8dada9e6ad4427","repo":"withastro/astro","slug":"imagemissingalt-de8dad","errorCode":"ImageMissingAlt","errorMessage":"Image missing \"alt\" property. \"alt\" text is required to describe important images on the page.","messagePattern":"Image missing \"alt\" property\\. \"alt\" text is required to describe important images on the page\\.","errorType":"exception","errorClass":"AstroError","httpStatus":null,"severity":"error","filePath":"packages/astro/components/Picture.astro","lineNumber":38,"sourceCode":"\tformats?: ImageOutputFormat[];\n\tfallbackFormat?: ImageOutputFormat;\n\tpictureAttributes?: HTMLAttributes<'picture'>;\n};\n\nconst defaultFormats = ['webp'] as const;\nconst defaultFallbackFormat = 'png' as const;\n\n// Certain formats don't want PNG fallbacks:\n// - GIF will typically want to stay as a gif, either for animation or for the lower amount of colors\n// - SVGs can't be converted to raster formats in most cases\n// - JPEGs compress photographs and high-noise images better than PNG in most cases\n// For those, we'll use the original format as the fallback instead.\nconst specialFormatsFallback = ['gif', 'svg', 'jpg', 'jpeg'] as const;\n\nconst { formats = defaultFormats, pictureAttributes = {}, fallbackFormat, ...props } = Astro.props;\n\nif (props.alt === undefined || props.alt === null) {\n\tthrow new AstroError(AstroErrorData.ImageMissingAlt);\n}\n\n// Picture attribute inherit scoped styles from class and attributes\nconst scopedStyleClass = props.class?.match(/\\bastro-\\w{8}\\b/)?.[0];\nif (scopedStyleClass) {\n\tif (pictureAttributes.class) {\n\t\tpictureAttributes.class = `${pictureAttributes.class} ${scopedStyleClass}`;\n\t} else {\n\t\tpictureAttributes.class = scopedStyleClass;\n\t}\n}\n\nconst layout = props.layout ?? imageConfig.layout ?? 'none';\nconst useResponsive = layout !== 'none';\n\nif (useResponsive) {\n\tprops.layout ??= imageConfig.layout;\n\tprops.fit ??= imageConfig.objectFit ?? 'cover';","sourceCodeStart":20,"sourceCodeEnd":56,"githubUrl":"https://github.com/withastro/astro/blob/d081033d5fe8e8a68c4bbbad4af9d2deb9c74bca/packages/astro/components/Picture.astro#L20-L56","documentation":"AstroError with code `ImageMissingAlt` (same code as the `<Image>` component), thrown by the `<Picture>` component at the same point in its render: after destructuring props it checks `props.alt` and throws if it is `undefined` or `null`. `<Picture>` generates multiple `<source>`s plus a fallback `<img>`, all of which inherit the same accessibility requirement, so the `alt` guard is identical.","triggerScenarios":"Calling `<Picture src={...} />` (or `<Picture formats={[...]} />`) without an `alt` prop; destructuring that drops `alt`; passing `alt={null}`.","commonSituations":"A developer swaps `<Image>` for `<Picture>` to serve modern formats and forgets to carry over `alt`; CMS data where alt text is optional; template/partial that omits the prop.","solutions":["Add a descriptive `alt` prop to `<Picture>`.","Use `alt=\"\"` for purely decorative pictures.","Guard dynamic values: `alt={data.alt ?? ''}`.","Run `astro check` to surface missing props before render."],"exampleFix":"// before\n<Picture src={hero} formats={['avif','webp']} />\n\n// after\n<Picture src={hero} formats={['avif','webp']} alt=\"Hero illustration of the product\" />","handlingStrategy":"type-guard","validationCode":"function hasAlt(props: unknown): props is { alt: string } {\n  return props != null && typeof (props as { alt?: unknown }).alt === 'string';\n}\n// before rendering\nif (!hasAlt(props)) props.alt = data.alt ?? '';","typeGuard":"function hasAltProp(props: unknown): props is { alt: string } {\n  return props != null && typeof (props as { alt?: unknown }).alt === 'string';\n}","tryCatchPattern":null,"preventionTips":["When migrating `<Image>` to `<Picture>`, copy the `alt` prop across.","Default dynamic alt to '' for decorative pictures.","Run `astro check` in CI to enforce required props.","Enforce `alt` presence in your CMS/content schema."],"tags":["astro-component","picture","image","accessibility","a11y","required-prop"],"backgroundTag":null,"analyzedSha":"d081033d5fe8e8a68c4bbbad4af9d2deb9c74bca","analyzedAt":"2026-08-12T13:37:29.035Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}