使用next/image从Firebase存储中获取图像会导致400状态代码

ut6juiuv 于 2022-12-12 发布在其他

关注(0)|答案(5)|浏览(215)

我使用的NextJS Image组件如下：

<Image src="https://firebasestorage.googleapis.com/v0/b/africatech-7cf1b.appspot.com/o/images%2F1606851317444_impact-logo-sq-Owen-Hancock.png?alt=media&token=35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb" layout="fill" />

它在本地工作，在DOM中如下所示：

<img alt="Company logo" src="/_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fafricatech-7cf1b.appspot.com%2Fo%2Fimages%252F1606851317444_impact-logo-sq-Owen-Hancock.png%3Falt%3Dmedia%26token%3D35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb&amp;w=3840&amp;q=75" decoding="async" sizes="(max-width: 640px) 640px, (max-width: 750px) 750px, (max-width: 828px) 828px, (max-width: 1080px) 1080px, (max-width: 1200px) 1200px, (max-width: 1920px) 1920px, (max-width: 2048px) 2048px, 3840px" srcset="/_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fafricatech-7cf1b.appspot.com%2Fo%2Fimages%252F1606851317444_impact-logo-sq-Owen-Hancock.png%3Falt%3Dmedia%26token%3D35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fafricatech-7cf1b.appspot.com%2Fo%2Fimages%252F1606851317444_impact-logo-sq-Owen-Hancock.png%3Falt%3Dmedia%26token%3D35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fafricatech-7cf1b.appspot.com%2Fo%2Fimages%252F1606851317444_impact-logo-sq-Owen-Hancock.png%3Falt%3Dmedia%26token%3D35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fafricatech-7cf1b.appspot.com%2Fo%2Fimages%252F1606851317444_impact-logo-sq-Owen-Hancock.png%3Falt%3Dmedia%26token%3D35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fafricatech-7cf1b.appspot.com%2Fo%2Fimages%252F1606851317444_impact-logo-sq-Owen-Hancock.png%3Falt%3Dmedia%26token%3D35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fafricatech-7cf1b.appspot.com%2Fo%2Fimages%252F1606851317444_impact-logo-sq-Owen-Hancock.png%3Falt%3Dmedia%26token%3D35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fafricatech-7cf1b.appspot.com%2Fo%2Fimages%252F1606851317444_impact-logo-sq-Owen-Hancock.png%3Falt%3Dmedia%26token%3D35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fafricatech-7cf1b.appspot.com%2Fo%2Fimages%252F1606851317444_impact-logo-sq-Owen-Hancock.png%3Falt%3Dmedia%26token%3D35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb&amp;w=3840&amp;q=75 3840w" style="visibility: visible; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;">

但是，在生产环境中，它不会加载映像。

GET https://launchafrica.io/_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fafricatech-7cf1b.appspot.com%2Fo%2Fimages%252F1606851317444_impact-logo-sq-Owen-Hancock.png%3Falt%3Dmedia%26token%3D35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb&w=1920&q=75 400

这似乎是因为：不允许使用“url”参数
在我的next.config.js中，我配置了以下内容：

images: { domains: ['firebasestorage.googleapis.com'], },

有人能帮助我弄清楚如何在生产中使用next/image与Firebase存储托管映像吗？因为本地加载很好。

next.js

来源：https://stackoverflow.com/questions/65601999/fetching-an-image-from-firebase-storage-using-next-image-results-in-a-400-status

5条答案

按热度按时间

11dmarpk1#

你有没有可能也在Firebase Hosting上托管这个呢？我遇到了这个问题，我意识到我必须在初始化NextJS时将next.config.js导入到配置中：

const customNextConfig = require('./next.config');

const server = next({
  dev: isDev,
  conf: customNextConfig,
});

...

赞(0）回复(0）举报 2022-12-12

5rgfhyps2#

我已经迟到了，但希望我的回答能对其他人有所帮助。
将域的配置添加到next.config.js中是不够的，您需要确保您的“下一个”示例获取该配置。
所以在我的情况下，我做了什么，使它工作：
之前

const nextjsDistDir = join("src", require("./src/next.config.js").distDir);
const nextjsServer = next({
  dev: isDev,
  conf: {
    distDir: nextjsDistDir
  }
});

之后

const nextjsDistDir = join("src", require("./src/next.config.js").distDir);
const nextjsServer = next({
  dev: isDev,
  conf: {
    distDir: nextjsDistDir,
    images: {
      domains: ['firebasestorage.googleapis.com'],
    }
  }
});

赞(0）回复(0）举报 2022-12-12

uz75evzq3#

在此为后人留下这句话（截至2021/12/21）：这似乎是因为NextJS（当使用npm start启动时）实际上并不使用next.config.js文件。查看https：//github.com/vercel/next.js/blob/canary/packages/next/cli/next-start.ts#L61，只有项目目录、主机名和端口被传递到https://github.com/vercel/next.js/blob/canary/packages/next/server/lib/start-server.ts#L44。因为conf参数没有被传递，所以images.domains丢失了。
最后我不得不自己编写（基于https://github.com/vercel/next.js/blob/canary/examples/custom-server-express/server.js）：

const port = parseInt(process.env.PORT, 10) || 5000
const listen = process.env.LISTEN_INTERFACE || '127.0.0.1';
const dev = process.env.NODE_ENV !== 'production';
const app = next({
    dev: dev,
    customServer: false,
    hostname: process.env.HOSTNAME || 'localhost',
    conf: {
        images: {
            domains: [process.env.NEXT_PUBLIC_IMAGE_DOMAIN]
        },
        trailingSlash: true,
    poweredByHeader: false
    }
})
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const container = express();
    
  container.all('*', (req, res) => {
    return handle(req, res)
  })
    
    const server = http.createServer(container);
  server.listen(port, listen);
});

赞(0）回复(0）举报 2022-12-12

bvjveswy4#

我的问题已解决

images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**',
      },
    ],
  },

赞(0）回复(0）举报 2022-12-12

n1bvdmb65#

您需要在下一个.config.js中添加以下代码：

...
images: {
    domains: ['firebasestorage.googleapis.com'],
},
...

赞(0）回复(0）举报 2022-12-12

我来回答

使用next/image从Firebase存储中获取图像会导致400状态代码

5条答案

相关问题

热门标签

最新问答