Image with src must use "width" and "height" properties or "fill" Next.js Origin: On your device Last updated 5 Nov 2026

Next.js: Image with src "https://example.com/a.jpg" must use "width" and "height" properties or "fill" property

next/image needs dimensions (or fill) for remote images so it can reserve space and avoid layout shift.

Exact message you may see Image with src must use "width" and "height" properties or "fill" propertyImage with src "/a.jpg" has "fill" but is missing "sizes" propImage with src has "fill" and parent element with invalid "position"Image with src is missing required "width" propertynext/image missing required width
Explore the map of this error Full error map →
Seen on: Next.js React

Meaning

Provide width and height props, or fill with a positioned parent (position: relative) and sizes. For local imports Next reads dimensions automatically. fill requires the parent to have position: relative|fixed|absolute and a size.

Common causes

  • Remote image without dimensions
  • fill used but parent not positioned/sized
  • Dynamic image without known size
  • Passing string src instead of static import
  • width/height set to 0

⚡ Quick fix

  1. <Image src={url} width={800} height={600} alt="" />
  2. Or fill + wrapper relative with a defined size
  3. Add sizes for responsive images

Detailed fix by platform

Next.js

  1. <div style={{position:"relative",width:"100%",aspectRatio:"16/9"}}><Image src={url} alt="" fill sizes="100vw" /></div>

How to diagnose

  1. Dimensions — width/height or fill?
  2. Parent — Positioned and sized?
  3. Source — Static import?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

_next/image 400 / upstream image response failed — Next.js: ⨯ upstream image response failed for https://example.com/a.jpg 404 / url parameter is not allowed (Next.js)_next/image 400 / ups…'sharp' is required to be installed in standalone mode — Next.js: Error: 'sharp' is required to be installed in standalone mode for the image optimization to function correctly (Next.js)'sharp' is required t…Conflicting app and page file was found — Next.js: ⨯ Conflicting app and page file was found, please remove the conflicting files to continue: "pages/index.tsx" - "app/page.tsx" (Next.js)Conflicting app and p…CORS error calling Next.js API route / route handler — Browser: Access to fetch at 'https://api.example.com/api/data' from origin 'https://app.example.com' has been blocked by CORS policy (Next.js route handler) (Next.js)CORS error calling Ne…next build: fetch failed ECONNREFUSED (build-time API) — Next.js: Error occurred prerendering page "/blog" TypeError: fetch failed { cause: Error: connect ECONNREFUSED 127.0.0.1:3000 } (Next.js)next build: fetch fai…next build: JavaScript heap out of memory — Next.js: FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory (during next build) (Next.js)next build: JavaScrip…next/image hostname — Error: Invalid src prop on `next/image`, hostname "x" is not configured under images in your `next.config.js` (React)next/image hostnameImage wit…

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.