const src = `${API}/user/photo/${blog.postedBy.username}`;
    
<Image loader={() => src} src={src} width={500} height={500}/>

这里，loader是一个为图像生成URL的函数。它将根域附加到您提供的src，并生成多个URL来请求不同大小的图像。这些多个URL用于自动生成srcset，以便访问您的网站的访问者将获得适合其视口大小的图像。

是的，我终于得到了答案。使加载器函数从图像的目的地加载它。

const myLoader=({src})=>{
  return `${API}/user/photo/${blog.postedBy.username}`;
}

使用此加载器函数加载图像标记的加载器属性。

<Image loader={myLoader} src={`${API}/user/photo/${blog.postedBy.username}`} width={500}
    height={500}/>

这对我来说非常有效

编辑next.config.js：

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['example.com'],
  },
}

我遇到了同样的问题，你需要重新启动你的开发服务器，你需要这样做，每次你对你的next.config.js文件进行更改。
API字符串应包括端口。例如localhost:3001

首先添加并重新启动dev服务器。

domains: ['localhost']

并确保使用http（s）协议返回图像链接
带有localhost：port/...的图像链接错误，返回为http：//localhost/...（或带有https）

在next.config.js文件内。
添加图像源域名：

const nextConfig = {
  reactStrictMode: true,
  images : {
    domains : ['sangw.in', 'localhost', 'picsum.photos'] // <== Domain name
  }
}

module.exports = nextConfig

在域数组中添加'localhost'将解决此问题，
不幸的是，nextJS在配置文件(next.config.js)更改后没有自动刷新服务器。
您必须手动重新启动服务器以反映更改。
您也可以尝试通过设置reactStrictMode值reactStrictMode: true,
以下是完整的导出对象

module.exports = {
    reactStrictMode: true,
    images: {
        domains: [
            "localhost",
            process.env.WORDPRESS_API_URL.match(/(http(?:s)?:\/\/)(.*)/)[2], // Valid WP Image domain.
            "2.gravatar.com",
            "0.gravatar.com",
            "secure.gravatar.com",
        ],
    },
};

我也遇到过同样的问题，我的域是正确的。删除.next和node_modules文件夹，并运行yarn/npm install修复了这个问题。

它有一个非常简单的解决方案，那就是：

module.exports = {
  images: {
    domains: ['imagedomain.com'],
  },
};

将“imagedomain.com”域名添加到图像〉域中。