Next.js next/image组件Invalid src报错，next.config.js配置求助

你的配置存在两个关键问题：

1. Hostname通配符使用错误 #

**.googleapis.com 无法匹配 storage.googleapis.com，Next.js的remotePatterns中hostname仅支持单个*作为通配符，或者直接指定具体主机名。这里直接写storage.googleapis.com最准确。

2. Pathname配置错误 #

/[some folder]/** 里的[some folder]是占位符，需要替换成你实际的文件夹名称，否则无法匹配对应路径。如果需要匹配该主机下所有路径，可直接用/**。

修正后的next.config.js（指定具体文件夹） #

module.exports = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'storage.googleapis.com',
        pathname: '/你的实际文件夹名称/**', // 替换为真实文件夹名
      }
    ]
  }
}

若需匹配所有路径的简化配置 #

module.exports = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'storage.googleapis.com',
        pathname: '/**',
      }
    ]
  }
}

修改配置后必须重启本地开发服务器，Next.js不会自动加载next.config.js的修改。

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