下一个JS图像在本地服务器中工作，但在生产中不工作

Question

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

这是我的下一个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>

Answer 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"],
},
};
},
});