vercel/next.js · error · Error
Image with src "${src}" has both "priority" and "loading='la
Error message
Image with src "${src}" has both "priority" and "loading='lazy'" properties. Only one should be used. What it means
Props validation in getImgProps: priority was combined with loading="lazy". Priority preloads the image as an eager high-priority fetch, which directly contradicts lazy loading; exactly one intent must be chosen.
Source
Thrown at packages/next/src/shared/lib/get-img-props.ts:548
)
}
// eslint-disable-next-line no-control-regex
if (/[\x00-\x20]$/.test(src)) {
throw new Error(
`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/')
) {View on GitHub (pinned to 0eb3775416)
Solutions
- Remove loading='lazy' when priority is set (or remove priority).
Defensive patterns
Strategy: validation
When it happens
Trigger: next/image receives both priority and loading='lazy'.
Common situations: Setting priority 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/32c4ed452c30e2f4.
Report an issue: GitHub.