vercel/next.js · error · Error

Image with src "${src}" has both "preload" and "loading='laz

Error message

Image with src "${src}" has both "preload" and "loading='lazy'" properties. Only one should be used.

What it means

Warning emitted by getImgProps when the caller sets both preload behavior (via the priority prop) and loading="lazy" on the same next/image. These two settings are contradictory — priority implies eager preloading of the image while lazy explicitly defers loading — so the component asks the author to keep only one. It is a developer-facing warning, not a build failure.

Source

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

            `Image with src "${src}" cannot end with a space or control character. Use src.trimEnd() to remove it or encodeURIComponent(src) to keep it.`
          )
        }
      }
    }
    if (!VALID_LOADING_VALUES.includes(loading)) {
      throw new Error(
        `Image with src "${src}" has invalid "loading" property. Provided "${loading}" should be one of ${VALID_LOADING_VALUES.map(
          String
        ).join(',')}.`
      )
    }
    if (priority && loading === 'lazy') {
      throw new Error(
        `Image with src "${src}" has both "priority" and "loading='lazy'" properties. Only one should be used.`
      )
    }
    if (preload && loading === 'lazy') {
      throw new Error(
        `Image with src "${src}" has both "preload" and "loading='lazy'" properties. Only one should be used.`
      )
    }
    if (preload && priority) {
      throw new Error(
        `Image with src "${src}" has both "preload" and "priority" properties. Only "preload" should be used.`
      )
    }
    if (
      placeholder !== 'empty' &&
      placeholder !== 'blur' &&
      !placeholder.startsWith('data:image/')
    ) {
      throw new Error(
        `Image with src "${src}" has invalid "placeholder" property "${placeholder}".`
      )
    }
    if (placeholder !== 'empty') {

View on GitHub (pinned to 0eb3775416)

Solutions

  1. Remove loading='lazy' when preload is set.
Defensive patterns

Strategy: validation

When it happens

Trigger: next/image receives both preload and loading='lazy'.

Common situations: Setting preload together with loading='lazy'; only one should be used.


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