vercel/next.js · error · Error

Image with src "${src}" has both "height" and "fill" propert

Error message

Image with src "${src}" has both "height" and "fill" properties. Only one should be used.

What it means

Props validation in getImgProps for next/image: the fill layout was combined with an explicit height prop. fill makes the image absolutely positioned and sized by its container, so explicit dimensions are contradictory and one of the two must be removed.

Source

Thrown at packages/next/src/shared/lib/get-img-props.ts:488

    - Remove \`{ output: 'export' }\` and run "next start" to run server mode including the Image Optimization API.
    - Configure \`{ images: { unoptimized: true } }\` in \`next.config.js\` to disable the Image Optimization API.
  Read more: https://nextjs.org/docs/messages/export-image-api`
      )
    }
    if (!src) {
      // React doesn't show the stack trace and there's
      // no `src` to help identify which image, so we
      // instead console.error(ref) during mount.
      unoptimized = true
    } else {
      if (fill) {
        if (width) {
          throw new Error(
            `Image with src "${src}" has both "width" and "fill" properties. Only one should be used.`
          )
        }
        if (height) {
          throw new Error(
            `Image with src "${src}" has both "height" and "fill" properties. Only one should be used.`
          )
        }
        if (style?.position && style.position !== 'absolute') {
          throw new Error(
            `Image with src "${src}" has both "fill" and "style.position" properties. Images with "fill" always use position absolute - it cannot be modified.`
          )
        }
        if (style?.width && style.width !== '100%') {
          throw new Error(
            `Image with src "${src}" has both "fill" and "style.width" properties. Images with "fill" always use width 100% - it cannot be modified.`
          )
        }
        if (style?.height && style.height !== '100%') {
          throw new Error(
            `Image with src "${src}" has both "fill" and "style.height" properties. Images with "fill" always use height 100% - it cannot be modified.`
          )
        }

View on GitHub (pinned to 0eb3775416)

Solutions

1. Remove either height or fill from the Image props.

When it happens

Trigger: next/image receives both height and fill props.

Common situations: An Image with fill also sets height; use one or the other.

AI-assisted analysis of vercel/next.js@0eb3775416 (2026-08-19). Data as JSON: /api/errors/9858839b7f0c520e. Report an issue: GitHub.