使用Next/auth展示登录用户资料时遇invalid src prop错误求助

在使用NextAuth.js展示已登录用户的资料时，触发了如下错误：

已尝试的修复操作 #

• 尝试的操作1截图：
  
• 尝试的操作2截图：
  

修改后的Next.js配置 #

解决方案 #

这个错误是Next.js的图片域名安全策略导致的——你用来展示用户头像的图片域名不在Next.js允许的外部图片源列表里。

正确配置方式 #

在next.config.js中，需要把用户头像实际所在的域名（比如GitHub、Google这类OAuth提供商的头像域名）添加到images.remotePatterns数组中：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'avatars.githubusercontent.com', // GitHub头像域名
      },
      {
        protocol: 'https',
        hostname: 'lh3.googleusercontent.com', // Google头像域名
      },
      // 按需添加其他OAuth服务商的头像域名
    ],
  },
  // 其他配置项...
}

module.exports = nextConfig

之前配置无效的原因 #

从你提供的配置截图来看，你添加的是next-auth.js.org这类域名，但用户头像的实际来源是OAuth服务商的专属域名，必须把这些实际域名加入白名单才能生效。

临时调试方案（不推荐生产环境） #

如果不确定具体域名，可临时开启unoptimized: true跳过图片优化，但生产环境不建议使用：

images: {
  unoptimized: true,
}

内容的提问来源于stack exchange，提问作者billy b