Next.js使用<Image />标签加载外部图片报域名未配置错误如何解决

你在next.config.js里配置的图片白名单域名拼写错误：配置值为link.papareact.com（缺少末尾的s），但实际引用的图片资源主机名是links.papareact.com，域名不匹配导致报错。

• 修改项目根目录下的next.config.js配置，将domains字段的域名修正为正确值：

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

如果你使用的是Next.js 13及以上版本，更推荐使用remotePatterns做外链图片配置，支持更细粒度的权限控制，配置示例：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'links.papareact.com',
        pathname: '/**',
      },
    ],
  },
}
module.exports = nextConfig

• 保存配置后完全重启Next.js开发服务，next.config.js的修改不会触发热更新，必须停掉当前运行的dev进程重新执行启动命令（npm run dev/yarn dev/pnpm dev），新配置才会生效。
• 重启完成后刷新页面即可正常加载图片，不会再出现该报错。

内容的提问来源于stack exchange，提问作者Pawan Gupta