firebase - Next/Image + Firebase Storage 403 读取错误

Question

我正在尝试使用来自 next/image 的图像，并使用 firebase 存储来存储图像文件。

但是在执行以下操作时出现 403(禁止)错误:

<Image src={profilePicURL} ...otherProps/>

我试过使用 <img>相反，网址工作正常，所以我认为这不是网址或权限问题。

有人知道问题出在哪里吗？

next.config.js

module.exports = withBundleAnalyzer({
   distDir: 'dist',
   images: {
      domains: ['firebasestorage.googleapis.com'],
   },
   webpack(config) {
      // config stuff
      return config
   }
})

Firebase 存储规则

match /profilePicture/{userID}/{fileName} {
   allow read: if request.auth != null;
   allow write: if request.auth.uid == userID;
}

Answer 1

这里也一样。403 错误是权限被拒绝的错误。我访问了 url https://firebasestorage.googleapi.com... 那是 url 用浏览器查询后的字符串，也得到了 403。

这导致您的 Firebase 存储规则错误。 Next.js 使用 next/image 优化和缓存图像，所以 request.auth 始终为 null。

所以修复它。

match /profilePicture/{userID}/{fileName} {
   allow read: if true;
   allow write: if request.auth.uid == userID;
}