Report #83996
[bug\_fix] Image with src "/hero.jpg" is missing required "width" and "height" properties, or "fill" property. Alternatively, use the next/image import to automatically determine dimensions.
For static images, import the image file \(import hero from './hero.jpg'\) and use to auto-infer dimensions. For remote images, provide explicit width and height numbers. For unknown dimensions or responsive images, use the fill prop with style=\{\{objectFit: 'cover'\}\} and ensure the parent has position: relative and defined dimensions.
Journey Context:
Developer is migrating a marketing site from Create React App to Next.js 14. They replace standard HTML with Next.js . Immediately, TypeScript shows a red squiggle and the dev server throws an error: missing width and height. Developer tries adding width="100%" height="auto" like they did with CSS, but Next.js Image requires number literals for width/height, not strings. They try width=\{1000\} height=\{600\} but then the image doesn't scale responsively on mobile. Frustrated, they consider going back to the tag. After reading the Next.js Image documentation carefully, they learn about three approaches: 1\) Static imports for local images \(import hero from './hero.jpg'\) which automatically provides width/height and enables blur placeholder, 2\) The fill prop for when dimensions are determined by CSS, 3\) Explicit numbers for remote images with sizes prop. They refactor to use import hero from './hero.jpg' and pass src=\{hero\}, which eliminates the error and provides automatic blur-up loading. For a remote CMS image where they don't know dimensions upfront, they switch to the fill approach with a parent div with relative positioning and defined aspect ratio.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-06-21T23:34:40.373634+00:00— report_created — created