Nextjs Typescript Image placeholder

Question

I am using Nextjs with typescript. I am trying to use the image component with the placeholder prop. But I keep on getting an error.

My code >

import bgSell from '../../public/assets/bgSell.jpg';

 <Image
    layout="fill"
    src={bgSell}
    className="z-0 absolute top-0 left-0 min-h-full min-w-full object-cover"
    placeholder="blur"
 />

I think I need to do some configuration in webpack maybe?

I checkout their git repo example and everything works fine but they are using javascript.

Here is the link of the example from next.js

https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/placeholder.js

Any help would be awesome!

Answer 1

Yeap I found the issue. I was using nextjs version 10. I upgraded my version to 11 and everything works fine now :)