6

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'}
  />
),

enter image description here

Does it mean I need a custom loader function to get rid off the warning? Thanks!

Natalia Bizitza
  • 103
  • 2
  • 9
  • 3
    If you're not applying any optimisations through a 3rd party cloud provider (your `loader` isn't doing anything), you might as well just use `unoptimized={true}` on the `Image`. – juliomalves Feb 20 '22 at 16:13
  • @juliomalves that actually makes sense. Thank you! I'll update my Q! – Natalia Bizitza Feb 20 '22 at 18:56

3 Answers3

9

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.

Cardoso
  • 962
  • 1
  • 12
  • 30
2

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 :)

edocollado
  • 471
  • 6
  • 7
0

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'}
/>
Abhishek Singh
  • 19
  • 3