Nextjs Image an issue with "loader" property that does not implement width - next.js

Question

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!

Answer 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.

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