Question 73066 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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.

enter image description here

**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:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:5658:16)
at renderForwardRef (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:5842:18)
at renderElement (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6005:11)
at renderNodeDestructiveImpl (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6076:14)
at renderNode (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6259:12)
at renderChildrenArray (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6211:7)
at renderNodeDestructiveImpl (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6141:7)
at renderNodeDestructive (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6076:14)
at renderNode (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6259:12)
at renderHostElement (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:5642:3)
at renderElement (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:5952:5)
at renderNodeDestructiveImpl (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6076:14)
at renderIndeterminateComponent (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:5785:7)
at renderElement (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:5946:7)
at renderNodeDestructiveImpl (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6076:14)
at renderNode (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6259:12)
at renderChildrenArray (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6211:7)
at renderNodeDestructiveImpl (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6141:7)
at renderNodeDestructive (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6076:14)
at renderNode (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6259:12)
at renderHostElement (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:5642:3)
at renderElement (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:5952:5)
at renderNodeDestructiveImpl (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6076:14)
at renderNode (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6259:12)
at renderChildrenArray (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6211:7)
at renderNodeDestructiveImpl (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6141:7)
at renderNodeDestructive (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6076:14)
at renderNode (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6259:12)
at renderHostElement (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:5642:3)
at renderElement (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:5952:5)
at renderNodeDestructiveImpl (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6076:14)
at renderElement (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:5971:9)
at renderNodeDestructiveImpl (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6076:14)
at renderIndeterminateComponent (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:5785:7)
at renderElement (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:5946:7)
at renderNodeDestructiveImpl (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6076:14)
at renderNode (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6259:12)
at renderChildrenArray (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6211:7)
at renderNodeDestructiveImpl (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6141:7)
at renderNodeDestructive (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6076:14)
at renderElement (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:5971:9)
at renderNodeDestructiveImpl (C:Userssdweikatmysecondnode_modulesreact-domcjsreact-dom-server.browser.development.js:6104:11) {

page: ‘/’
}
null

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    You have 2 ways:

    1. Go to Image component and make width property non-required.
    2. Write width manually like
      <Image src={src} alt='no image' id={styles.img} width={200} />
    Login or Signup to reply.
  3. 0

    Just use width without value. It will be undefined and as I see undefined is ok for the component.

    <Image src={src} alt='no image' id={styles.img} width />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search