NextJS Image Error with the Src Width and Height

Question

I am having a problem with the image src that I am trying to upload in my dApp. I have the height and width properties set but it still shows the following error:

Uncaught Error: Image with src "https://vivi-project.infura-ipfs.io/ipfs/Qmc5VkpgsRbiyxG1152WVfnHgZ4caqVLJDSrUPYhX9TdCP" must use "width" and "height" properties or "layout='fill'" property.

I have the properties set as: `

<Image
                            src={fileUrl}
                            alt="Picture of the NFT"
                            className="rounded mt-4"
                            width={350}
                            height={500}
                            //blurDataURL="data:..." automatically provided
                            //placeholder="blur" // Optional blur-up while loading
                          />

`

I have looked at solution: NextjS Image issue with src and default external image URL

and looked at the Nextjs documentation https://nextjs.org/docs/api-reference/next/image

kanuos · Accepted Answer · 2022-11-28 16:21:47Z

0

Seems like you are using the legacynext image component instead of the next13 supported next/image component.

If you are using the legacy image component this is how you'd do it

import Image from "next/legacy/image";

You'd need the height and width property together or layout props to get it to work. Also, you'd need a wrapper for the image whose position is not static.

If you are using the Next 13 Image component i.e next/image this is how you'd import

import Image from "next/image";

This new component needs the height and width props unless it is a statically hosted image, in which case, you'd need to pass the layout props.

You can read all about it in the next 13 image docs or the next legacy image docs

answered Nov 28, 2022 at 16:21

kanuos

1,2131 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

galaticalives13 Over a year ago

Hello @kanuos I am actually still under Next version 12.3.4. Would you advise that I stick to your advice on legacy image component? I did try upgrading the Next 13 yesterday but it wasn't 'playing' nice with my other dependencies which is why I downgraded back again.

kanuos Over a year ago

I run my website using Next 12 but sooner or later I'd have to upgrade it to next 13 when it's stable enough. For the time being, using Next 12 resolves the problem. I think we have some time before we can upgrade to Next 13 which in itself should be much of a hassle.

galaticalives13 Over a year ago

Alright, thank you. I'll take a look at legacy next image component and the documents you linked for me.

galaticalives13 Over a year ago

Side note: I am also using tailwind css. It is in the global.module.css file Would this affect my image src being read for the height and properties set in another file? In the image preview, it doesn't appear to do that.

kanuos Over a year ago

Tailwind has nothing to do with Next. Stick to the tailwind installation guide for Next and you're good to go

galaticalives13 · Accepted Answer · 2022-11-29 16:08:54Z

0

Found the answer to be in my index.js file that wasn't posted in here. Make sure to check for the image src in there to have the width and height uncommented and set to appropriate sizing. Rookie mistake that was caught by icyJoseph on GitHub. Answer to Image Src Issue

answered Nov 29, 2022 at 16:08

galaticalives13

11 silver badge4 bronze badges

Collectives™ on Stack Overflow

NextJS Image Error with the Src Width and Height

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related