{"record":{"id":"dccedf880a7ca1e7","repo":"withastro/astro","slug":"missing-width-parameter-for-remote-image-optio","errorCode":null,"errorMessage":"Missing `width` parameter for remote image ${options.src}","messagePattern":"Missing `width` parameter for remote image (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/integrations/vercel/src/image/shared.ts","lineNumber":139,"sourceCode":"\t// For images where a width has been specified:\n\t// - If the width that the user asked for isn't in `sizes`, then fall back to the nearest one, but save the width\n\t// \tthe user asked for so we can put it on the `img` tag later.\n\t// - Otherwise, just use as-is.\n\t// The end goal is:\n\t// - The size on the page is always the one that the user asked for or the base image's size\n\t// - The actual size of the image file is always one of `sizes`, either the one that the user asked for or the nearest to it\n\tif (!options.width) {\n\t\tconst src = options.src;\n\t\tif (isESMImportedImage(src)) {\n\t\t\tconst nearestWidth = configuredWidths.reduce((prev, curr) => {\n\t\t\t\treturn Math.abs(curr - src.width) < Math.abs(prev - src.width) ? curr : prev;\n\t\t\t});\n\n\t\t\t// Use the image's base width to inform the `width` and `height` on the `img` tag\n\t\t\toptions.inputtedWidth = src.width;\n\t\t\toptions.width = nearestWidth;\n\t\t} else {\n\t\t\tthrow new Error(`Missing \\`width\\` parameter for remote image ${options.src}`);\n\t\t}\n\t} else {\n\t\tif (!configuredWidths.includes(options.width)) {\n\t\t\tconst nearestWidth = configuredWidths.reduce((prev, curr) => {\n\t\t\t\treturn Math.abs(curr - options.width!) < Math.abs(prev - options.width!) ? curr : prev;\n\t\t\t});\n\n\t\t\t// Save the user's requested width to inform the `width` and `height` on the `img` tag\n\t\t\toptions.inputtedWidth = options.width;\n\t\t\toptions.width = nearestWidth;\n\t\t}\n\t}\n\n\tif (options.widths) {\n\t\t// Vercel only supports a fixed set of widths, so remove any that aren't in the list\n\t\toptions.widths = options.widths.filter((w) => configuredWidths.includes(w));\n\t\t// Oh no, we've removed all the widths! Let's add the nearest one back in\n\t\tif (options.widths.length === 0) {","sourceCodeStart":121,"sourceCodeEnd":157,"githubUrl":"https://github.com/withastro/astro/blob/d081033d5fe8e8a68c4bbbad4af9d2deb9c74bca/packages/integrations/vercel/src/image/shared.ts#L121-L157","documentation":"Thrown by the Vercel image service when a remote (non-imported) image has no `width` set. Vercel cannot infer dimensions for remote URLs, and unlike local imported images it cannot fall back to the nearest configured size from source metadata.","triggerScenarios":"Using `<Image src=\"https://example.com/photo.jpg\" />` (string URL) without `width`. Passing a remote URL to `getImage()` without a `width` transform. The `options.src` is not an ESM-imported image object, so the `isESMImportedImage` branch is skipped.","commonSituations":"Treating remote images like local imports (which auto-supply width/height). Migrating from another adapter that defaulted dimensions. Forgetting `width` on dynamic remote URLs.","solutions":["Add an explicit `width` (and ideally `height`) to the `<Image>`/`getImage` call for any remote `src`.","Import local images as ESM (`import photo from './photo.png'`) so dimensions are inferred automatically.","If the remote source is actually yours, download and import it instead of referencing by URL."],"exampleFix":"// before\n<Image src=\"https://cdn.example.com/hero.jpg\" alt=\"hero\" />\n// after\n<Image src=\"https://cdn.example.com/hero.jpg\" alt=\"hero\" width={1920} height={1080} />","handlingStrategy":"validation","validationCode":"function needsWidth(src: unknown): boolean {\n  return typeof src === 'string'; // remote URLs are strings; imports are objects\n}\nif (needsWidth(options.src) && !options.width) {\n  throw new Error('Remote images require an explicit width.');\n}","typeGuard":"function isRemoteSrc(src: unknown): src is string {\n  return typeof src === 'string';\n}","tryCatchPattern":null,"preventionTips":["Require `width`/`height` props for all remote `<Image>` usages via a lint rule.","Prefer ESM-importing local assets so dimensions are inferred.","Wrap remote `<Image>` in a project component that mandates dimensions."],"tags":["vercel","image-optimization","remote-images","dimensions"],"backgroundTag":null,"analyzedSha":"d081033d5fe8e8a68c4bbbad4af9d2deb9c74bca","analyzedAt":"2026-08-12T13:37:29.035Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}