下一个 JS Image 在本地服务器中工作但在生产中不工作答案

【问题标题】：Next JS Image working in local server but not working in production下一个 JS Image 在本地服务器中工作但在生产中不工作
【发布时间】：2022-10-20 16:44:20
【问题描述】：

所以我已经在 firebase 托管上部署了我的下一个 js 项目。我正在使用下一个 js 图像标记来显示来自 firebase 存储的图像。我在 next.config.js 文件中添加了 firebase 域，它在本地服务器上运行良好。但是当我将它部署到 firebase 时，它会给出状态 400 的错误。

这是我的 next.config.js 文件

/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
images: {
  domains: ["firebasestorage.googleapis.com"],
  },
};

module.exports = nextConfig;

这是我的图片标签

  <Box sx={{ position: "relative", height: "100%", width: "100%" }}>
       <Image src={imageUrl} layout="fill" alt="Message from lab" />
  </Box>

【问题讨论】：

如果已部署，您可以分享链接吗？
图片路径可能有问题。您能否分享您从 firebase 存储中获得的 imageURL 路径？
@TusharShahi 我无法共享该链接，因为它是实时网站的管理页面。
@IGnyte 我不认为这是 URL 的问题，因为相同的 URL 在 localhost 服务器中有效，而不是在生产服务器上。
您说的错误标记为 400 吗？ 400 又名“错误请求”

标签： firebase next.js firebase-storage nextjs-image

【解决方案1】：

如果您在 Firebase 上托管 SSR，您还需要将该配置添加到 Cloud Function 以确保您的服务器实例获取该配置。

const server = next({
  dev: process.env.NODE_ENV !== "production",
  conf: {
    distDir: ".next",
    reactStrictMode: true,
    swcMinify: true,
    images: {
      domains: ["firebasestorage.googleapis.com"],
      },
    };
  },
});

【讨论】：