This is my code for the Nextjs Image component:
... Cell: ({ value }: CellType) => ( <Image priority src={value} loader={() => value} className={''} height={100} width={100} alt={'profile_picture'} /> ), 
Does it mean I need a custom loader function to get rid off the warning? Thanks!
I had a same issue like yours and solved by adding unoptimized={true} prop into the <Image> tag. If you don't apply optimizations, you need to announce that you don't optimize.
Something like below:
<Image priority src={value} loader={() => value} unoptimized={true} // <=== insert this prop className={''} height={100} width={100} alt={'profile_picture'} /> Please let me know if it work.
Thank you.
I had the same error but what I have done to fix it is to incorporate in the next.config.js file the URL of my media files, in my case it is cloudinary, the file should look like this:
/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, images: { domains: [ 'res.cloudinary.com' ], }, } module.exports = nextConfig And when I use the image component (next/image) I remove the loader and just put the URL like this:
<Image key={element.id} src={element.url} width={500} height={500} alt="some description" /> I don't use unoptimized={true} because the point is that the component changes the quality of the image according to the client's device.
good look :)
I fixed it like this:
Added this definition to loader attribute-:
loader={({ src, width }) => { return src + "?w=" + width }}
<Image priority src={value} loader={({ src, width }) => { return src + "?w=" + width }} height={100} width={100} alt={'profile_picture'} /> 
?w= to the query string when they're very strict. For example, an URL that has the image specified in the query string itself, e.g. foo.com/image?image_hash=asdfasdf
loaderisn't doing anything), you might as well just useunoptimized={true}on theImage.