Firebase 存储图像未显示在 nextjs 应用程序中

Posted 2023-03-06

【中文标题】Firebase 存储图像未显示在 nextjs 应用程序中

【英文标题】：Firebase storage image not displaying in nextjs application

【发布时间】：2021-10-23 16:54:39

【问题描述】：

我正在使用 Vercel 的 Next.js 模板，只是尝试将底部的徽标图像替换为存储在 Firebase 存储中的徽标图像。我已经配置了 next.config.js，它不会抛出错误，但不会显示图像。它仅显示带有替代文本的图像缺少占位符。 这是我的 next.config.js

/**

* @type import('next').NextConfig

*/
const nextConfig = 

  images: 
  
  domains: ['firebasestorage.googleapis.com'],
  
  ,
  
;
  
  
module.exports = nextConfig;

我还可以在浏览器中访问该图像。

编辑 14/08/21**

当我用标准的 html 标记替换 nextjs 图像标记时，图像确实会加载，因此 next 似乎有些问题。

【问题讨论】：

如果您转到“网络”选项卡上的开发工具，您是否看到那里的图像请求失败？

是的，我收到“403 Forbidden”的状态码，但是当我将 URL 直接放入浏览器时，它可以工作，我得到状态码 304。

【参考方案1】：

是的，我遇到了同样的问题，并通过将图像标签从 NextJs 标签更改为普通的 html 标签来解决问题。这会起作用，是的，你会收到一个 eslint 警告，但你没有其他选项 希望这可能会有所帮助

【讨论】：

您可以禁用触发警告的 ESLint 规则，参见***.com/a/68224530/1870780。