Next.js <Image/>组件src配置错误：Firebase图片域名未配置求助

return (<Image/>)

错误原因 #

你把Next.js的图片远程域名配置放在了withPWAInit的参数里，而非Next.js核心配置对象nextConfig中，同时pathname的匹配规则没有覆盖到具体的图片文件路径。

修复步骤 #

1. 将images配置移至nextConfig对象内，确保Next.js能识别该配置
2. 修改pathname为/v0/b/cyberpolaimageupload.appspot.com/o/images/**，用**通配符匹配该路径下的所有图片文件

修改后的next.config.mjs代码：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'firebasestorage.googleapis.com',
        port: '',
        pathname: '/v0/b/cyberpolaimageupload.appspot.com/o/images/**',
      },
    ],
  },
};

import withPWAInit from "@ducanh2912/next-pwa";

const withPWA = withPWAInit({
    dest: "public",
    cacheOnFrontEndNav: true,
    aggressiveFrontEndNavCaching: true,
    reloadOnOnline: true,
    swcMinify: true,
    disable: false,
    workboxOptions: {
        disableDevLogs: true,
    },
});

export default withPWA(nextConfig);

说明 #

• Next.js的images配置必须属于nextConfig的顶层字段，才能被框架正确读取
• pathname中的**表示匹配该路径下任意层级的文件，适配你存储在Firebase的具体图片路径

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