Next/image component gives error "missing required "width" property." when running it with npm run dev

Question

When i run my NextJS app using npm run dev the Image component gives the error "missing required "width" property"

To make the app work, i need to set width and height as inline attributes for all Image components in the project.

**NOTE: I tried setting a width and a height using CSS external file, it did not work. Only setting the inline attributes works.

Full Error

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: '/' } null

Shareef Dweikat · Accepted Answer · 2023-04-10T16:30:26.020

11

I found out a solution. I added "fill" prop to Image. Then i wrapped it with a div. I can set a CSS class to the div, and that's how i can control the size of the image without inline width and height.

edited Apr 10 '23 at 16:30

answered Apr 10 '23 at 16:05

Shareef Dweikat

361
2
13

Eduardo Matsuoka · Answer 2 · 2023-07-26T16:01:00.477

Complementing the accepted solution, in order to avoid defining the required width or height props, a fill prop with value true should be added to the Image component as:

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

There are other settings to keep in mind, such as the parent element position value for this solution to work and object-fit to preserve the image ratio. Be sure to check the official documentation about fill:

score 0 · Answer 3 · answered Mar 19 '23 at 09:53

0

You have 2 ways:

Go to Image component and make width property non-required.
Write width manually like <Image src={src} alt='no image' id={styles.img} width={200} />

answered Mar 19 '23 at 09:53

Ali Dadashi

76
4

It is already non required declare const Image: React.ForwardRefExotic.......... { src: string | StaticImport; alt: string; width?: SafeNumber | undefined; height?: SafeNumber | undefined; – Shareef Dweikat Mar 19 '23 at 09:58
You have declared it as a non-required prop. Now you should check that is it non-required when you use it? I mean something like this: – Ali Dadashi Mar 19 '23 at 10:20
No i did not declare it. It is already declared. I am using Image component from Next/image package. It is a package comes out-of-the-box ready from NextJS framework. For your example: I have 2 reasons why i cant use it. First, i don't want to use inline attributes at all. Second, i can't use percentages with inline attributes, because i can't pass strings. For instance width="50%". – Shareef Dweikat Mar 19 '23 at 11:17

score 0 · Answer 4 · answered Jun 27 '23 at 06:04

0

The solution to this problem is to add fill property to the Image component

<Image fill alt='no image' id={styles.img} />

answered Jun 27 '23 at 06:04

Liknox

35
5

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 29 '23 at 17:04

score 0 · Answer 5 · answered Jul 03 '23 at 10:32

I had this issue while running tests with Jest/RTL. The fill suggestion fixed at first glance, but then, it obviously affected the rendering of the icon when I ran the app. I could have added a wrapper with the width prop set, but I only got this error when running the tests, with a mocked src, so it wouldn't really make sense to change working code.

TL;DR: If you can't, or don't want to, change the image tag just for the sake of testing, you can mock it by giving it a real image src, in my case it was an svg and it worked:

import member from 'assets/img/member.svg'

describe('Component', () => {
  const image = member
  const label = 'Label'
  const value = 'Value'

  test('renders correctly', () => {
    render(<Component image={image} label={label} value={value} />)

    (...)
  })
(...)

score 0 · Answer 6 · answered Aug 24 '23 at 18:17

Working Solution

Adding to the above-mentioned solutions.

In case of using fill you need to wrap your image with a container making its position relative else it positions itself with respect to the nearest relative parent (if no parent's position is relative, it positions itself wrt <body> )
Image takes the height of the nearest parent which has some height. If no parent satisfies this the image height will be 0 (i.e. you won't see the image ).
```
<div className="relative h-20">
   <Image src="/next.svg" alt="Next.js Logo" fill />
</div>
```

In some cases the image infers its siblings' height. Consider the below example where the parent div infers its height from the height of the first div.

 <div className="grid grid-cols-2">
    <div>Image height is same as My height</div>
    <div className="relative">
       <Image src="/next.svg" alt="Next.js Logo" fill />
    </div>
 </div>

Open the above Code snippets in Code Sandbox

Note: fill sets position: absolute; top:0; left:0 for the image; Next throws an error if the position is changed to relative using styles

score 0 · Answer 7 · answered Aug 26 '23 at 12:54

0

Temporarily add "fill" to the end of the image style. This is a temporary solution to the problem

answered Aug 26 '23 at 12:54

Bekmurod

1
1

Next/image component gives error "missing required "width" property." when running it with npm run dev

7 Answers7

Working Solution