Next/image 组件给出错误“缺少所需的“宽度”属性。” 使用 npm run dev 运行它时

Question

当我使用 npm run dev 运行 NextJS 应用程序时，图像组件给出错误"missing required "width" property"

为了使应用程序正常工作，我需要将宽度和高度设置为项目中所有图像组件的内联属性。

**注意：我尝试使用 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) {

页面: '/' } null

Answer 1

我找到了一个解决方案。我向图像添加了“fill”属性。然后我用div包裹它。我可以为 div 设置 CSS 类，这就是我如何控制图像的大小而无需内联宽度和高度。

Answer 2

补充已接受的解决方案，为了避免定义 requiredwidth或heightprops，应将fill具有值的 propstrue添加到Image组件中，如下所示：

<Image fill={true} src="..." alt="" />

还有其他设置需要记住，例如position此解决方案起作用并object-fit保留图像比例的父元素值。请务必查看有关以下内容的官方文档fill：