nextjs config_error ai_generated true

Error: Invalid width attribute on next/image. The width must be a positive number less than or equal to the image's intrinsic width (1920).

ID: nextjs/invalid-image-width-attribute

Also available as: JSON · Markdown · 中文
92%Fix Rate
87%Confidence
1Evidence
2024-04-20First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
13.5.0 active — — —
14.2.0 active — — —
15.0.0 active — — —

Root Cause

The next/image component's width prop is set to a value greater than the image's intrinsic width, or is zero/negative. Next.js enforces that width cannot exceed the original image dimensions to prevent upscaling without explicit configuration.

generic

中文

next/image 组件的 width 属性设置为大于图像原始宽度的值，或为零/负数。Next.js 强制要求 width 不能超过原始图像尺寸，以防止未经明确配置的放大。

Official Documentation

https://nextjs.org/docs/app/api-reference/components/image#width

Workarounds

  1. 95% success Set the width prop to the image's actual intrinsic width or smaller. Use the fill prop with sizes if you need to stretch beyond intrinsic dimensions. 
    Set the width prop to the image's actual intrinsic width or smaller. Use the fill prop with sizes if you need to stretch beyond intrinsic dimensions.
  2. 70% success Use the unoptimized prop to bypass Next.js image optimization, which also relaxes dimension validation. 
    Use the unoptimized prop to bypass Next.js image optimization, which also relaxes dimension validation.

中文步骤

  1. Set the width prop to the image's actual intrinsic width or smaller. Use the fill prop with sizes if you need to stretch beyond intrinsic dimensions.
  2. Use the unoptimized prop to bypass Next.js image optimization, which also relaxes dimension validation.

Dead Ends

Common approaches that don't work:

  1. Setting width to a very large number like 9999 to avoid responsive issues 90% fail

    Next.js validates width against the actual image dimensions. Using a value larger than intrinsic width triggers this error.

  2. Omitting width and height props entirely 80% fail

    next/image requires either width/height or fill prop. Omitting them results in a different error about missing dimensions.

  3. Using CSS to override the width after setting it incorrectly 85% fail

    The validation happens at build/render time before CSS is applied. CSS overrides don't prevent the error.