'Nextjs Image an issue with "loader" property that does not implement width

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!



Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Oscar Cardoso Garcia