Estoy usando Next.js y estoy luchando para que las imágenes de almacenamiento de Firebase se representen en la pantalla, ya que siguen apareciendo como errores 403.
Subo una imagen al almacenamiento cuando agrego un documento a Firestore con una URL anidada y luego uso esa URL para obtener la imagen.
Esta es mi etiqueta Next Image con receta.main_image.url == https://storage.googleapis.com/chairy-cooks.appspot.com/recipes/0O3Oycow4lJvyhDbwN0j/main_image/190524-classic-american-cheeseburger-ew-207p. png
Y Recipe.main_image.name == el nombre de la foto en el almacenamiento de firebase.
<Image alt={recipe.main_image.name} src={recipe.main_image.url} width={650} height={650} />La etiqueta alt vuelve como lo correcto (nombre de la imagen en el almacenamiento de base de fuego), así que sé que la imagen se está devolviendo, pero por alguna razón no estoy autorizado. Probé varias soluciones, incluido cambiar las reglas de base de fuego para
service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write: if request.auth != null; } } }Y
service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write; } } }Pero tampoco cambie el resultado. También configuré mi próxima configuración, así que estoy obteniendo el almacenamiento de Firebase.
images: { domains: ['images.ctfassets.net', 'storage.googleapis.com'], },Si las imágenes se mostrarán al público, sugeriría otorgar acceso público a la imagen. Cloud Storage para Firebase está respaldado por Google Cloud Storage. Puede hacer que los objetos individuales sean de lectura pública o que el depósito sea de lectura pública .
o mejor aún, genera URLs firmadas , de esta manera puedes otorgar acceso por tiempo limitado a un objeto. Si está trabajando con Javascript, puede echar un vistazo a este código de muestra sobre cómo generar una URL firmada.
/** * TODO(developer): Uncomment the following lines before running the sample. * Note: when creating a signed URL, unless running in a GCP environment, * a service account must be used for authorization. */ // The ID of your GCS bucket // const bucketName = 'your-unique-bucket-name'; // The full path of your file inside the GCS bucket, eg 'yourFile.jpg' or 'folder1/folder2/yourFile.jpg' // const fileName = 'your-file-name'; // Imports the Google Cloud client library const {Storage} = require('@google-cloud/storage'); // Creates a client const storage = new Storage(); async function generateV4ReadSignedUrl() { // These options will allow temporary read access to the file const options = { version: 'v4', action: 'read', expires: Date.now() + 15 * 60 * 1000, // 15 minutes }; // Get a v4 signed URL for reading the file const [url] = await storage .bucket(bucketName) .file(fileName) .getSignedUrl(options); console.log('Generated GET signed URL:'); console.log(url); console.log('You can use this URL with any user agent, for example:'); console.log(`curl '${url}'`); } generateV4ReadSignedUrl().catch(console.error);Puede visitar esta documentación para obtener más información.