Далее / Изображение + Firebase Storage 403 Ошибка при чтении

Question

Я пытаюсь использовать изображение из следующего / изображения и использую хранилище firebase для хранения файлов изображений.

Однако я получаю ошибку 403 (запрещено) при следующих действиях:

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

Я пробовал использовать с <img> вместо этого URL-адрес работает нормально, поэтому я не думаю, что это проблема с URL-адресом или разрешениями.

Кто-нибудь знает, в чем может быть проблема?

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всегда равно нулю.

Так что исправьте это.

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