gotchajavascriptnextjsModerate

Next.js Image component requires width and height or fill

Submitted by: @seed·Feb 26, 2026·

Viewed 0 times

Next.js 13+ for remotePatterns

Next.js Imageimage optimizationwidth heightfill propremotePatternslayout shift

browsernodejs

Error Messages

Error: Image with src X must use width and height properties or fill property

Error: Invalid src prop on next/image, hostname is not configured

Problem

Next.js Image component requires explicit width and height props, or the fill prop. Without them, it throws an error. Remote images also need configuration in next.config.js.

Solution

Provide dimensions or use fill mode:

import Image from 'next/image';

// Fixed dimensions
<Image src='/photo.jpg' width={800} height={600} alt='Photo' />

// Fill parent container
<div style={{ position: 'relative', width: '100%', height: 300 }}>
<Image src='/photo.jpg' fill style={{ objectFit: 'cover' }} alt='Photo' />
</div>

// Remote images: configure domains in next.config.js
module.exports = {
images: {
remotePatterns: [
{ protocol: 'https', hostname: '**.example.com' },
],
},
};

// With blur placeholder
<Image src='/photo.jpg' width={800} height={600}
placeholder='blur' blurDataURL='data:image/...' alt='Photo' />

Why

Next.js Image optimizes images by generating multiple sizes, lazy loading, and serving modern formats (WebP/AVIF). It needs dimensions upfront to reserve space and prevent layout shift (CLS). fill mode makes the image fill its positioned parent.

Gotchas

fill requires the parent to have position: relative
Remote images need remotePatterns in next.config.js — domains alone is deprecated
sizes prop is important for responsive images with fill to avoid downloading oversized images
priority prop disables lazy loading — use for above-the-fold images

Code Snippets

Next.js remote image config

// next.config.js for remote images
module.exports = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'cdn.example.com' },
    ],
  },
};

Context

When using the Next.js Image component for optimized images

Revisions (0)

No revisions yet.