Next.js Image组件运行npm run dev时提示缺少width属性错误

运行npm run dev启动Next.js应用时，Image组件抛出错误："missing required 'width' property"。目前只有给所有Image组件设置内联的width和height属性才能正常运行，通过外部CSS设置宽高完全无效。

完整错误日志 #

error - Error: Image with src "https://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/1200px-Flag_of_the_United_States.svg.png" is missing required "width" property.
at eval (webpack-internal:///./node_modules/next/dist/client/image.js:465:27)
at renderWithHooks (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5658:16)
at renderForwardRef (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5842:18)
at renderElement (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6005:11)
at renderNodeDestructiveImpl (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
at renderNode (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6259:12)
at renderChildrenArray (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6211:7)
at renderNodeDestructiveImpl (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6141:7)
at renderNodeDestructive (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
at renderNode (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6259:12)
at renderHostElement (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5642:3)
at renderElement (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5952:5)
at renderNodeDestructiveImpl (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
at renderIndeterminateComponent (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5785:7)
at renderElement (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
at renderNodeDestructiveImpl (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
at renderNode (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6259:12)
at renderChildrenArray (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6211:7)
at renderNodeDestructiveImpl (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6141:7)
at renderNodeDestructive (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
at renderNode (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6259:12)
at renderHostElement (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5642:3)
at renderElement (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5952:5)
at renderNodeDestructiveImpl (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
at renderNode (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6259:12)
at renderChildrenArray (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6211:7)
at renderNodeDestructiveImpl (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6141:7)
at renderNodeDestructive (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
at renderNode (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6259:12)
at renderHostElement (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5642:3)
at renderElement (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5952:5)
at renderNodeDestructiveImpl (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
at renderElement (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5971:9)
at renderNodeDestructiveImpl (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
at renderIndeterminateComponent (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5785:7)
at renderElement (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
at renderNodeDestructiveImpl (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
at renderNode (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6259:12)
at renderChildrenArray (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6211:7)
at renderNodeDestructiveImpl (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6141:7)
at renderNodeDestructive (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
at renderElement (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5971:9)
at renderNodeDestructiveImpl (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11) {
page: '/'
}

问题原因 #

Next.js的Image组件在服务端渲染阶段会强制校验width和height属性，外部CSS样式在这个阶段尚未加载生效，组件无法读取到CSS中的宽高值，因此必须通过内联属性传递。

解决方案 #

1. 封装自定义Image组件（减少重复代码） #

创建全局复用的自定义Image组件，预设默认宽高或支持动态传参，其他页面直接引用即可：

import Image from 'next/image';

const CustomImage = ({ src, alt, width = 600, height = 400, ...rest }) => {
  return <Image src={src} alt={alt} width={width} height={height} {...rest} />;
};

export default CustomImage;

使用时：

<CustomImage src="https://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/1200px-Flag_of_the_United_States.svg.png" alt="美国国旗" />

2. 使用fill属性实现响应式布局（Next.js 13+） #

如果需要图片自适应容器尺寸，可结合fill属性和父容器的相对定位，无需手动设置宽高：

<div style={{ position: 'relative', width: '100%', height: 300 }}>
  <Image
    src="https://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/1200px-Flag_of_the_United_States.svg.png"
    alt="美国国旗"
    fill
    style={{ objectFit: 'cover' }}
  />
</div>

3. 配置远程图片自动获取宽高 #

在next.config.js中配置远程图片域名，Next.js会自动获取远程图片的宽高信息，无需手动设置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'upload.wikimedia.org',
        pathname: '/wikipedia/en/thumb/**',
      },
    ],
  },
};

module.exports = nextConfig;

配置后直接使用Image组件：

<Image src="https://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/1200px-Flag_of_the_United_States.svg.png" alt="美国国旗" />

内容的提问来源于stack exchange，提问作者Sharif