我有一个和你一样的问题，通过将unoptimized={true} prop添加到<Image>标签中来解决。如果您没有应用优化，则需要声明您没有进行优化。
类似下面的东西：

<Image
    priority
    src={value}
    loader={() => value}
    unoptimized={true}  // <=== insert this prop
    className={''}
    height={100}
    width={100}
    alt={'profile_picture'}
  />

请让我知道如果它工作。
谢谢你。

我也有同样的错误，但我所做的修复它是在next.config.js文件中合并我的媒体文件的URL，在我的情况下，它是cloudinary，文件应该看起来像这样：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,

  images: {
    domains: [
      'res.cloudinary.com'
    ],
  },
}

module.exports = nextConfig

当我使用图像组件（next/image）时，我删除了加载器，并将URL如下所示：

<Image
  key={element.id}
  src={element.url}
  width={500}
  height={500}
  alt="some description"
/>

我不使用unoptimized={true}，因为关键是组件会根据客户端的设备改变图像的质量。

好看：）

我把它固定成这样：
将此定义添加到加载器属性-：

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