How to SIMPLY retrieve images from firebase storage and display them, using react?

user_15816842 0
Viewed 442

I have seen a LOT of questions on this topic. However, all of them seems to be too complicated for my needs. (uploading, taking photos from different folders, rerendering on changes and so on).

All I want, is to display a few images that are known in advance, and that will not be changed by the user - perhaps sometime by me but that's it.

This is my config file:

import firebase from 'firebase/app';
import 'firebase/storage';
import 'firebase/firestore';


// Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "AIzaSyCrThJklCCnH6PJMVUocQ2CeMk2WpRh5Pc",
    authDomain: "shez-up.firebaseapp.com",
    databaseURL: "https://XXX-default-rtdb.europe-west1.firebasedatabase.app",
    projectId: "shez-up",
    storageBucket: "shez-up.appspot.com",
    messagingSenderId: "279615555905",
    appId: "1:279615555905:web:a69de3206d7ae83fb3f9c0",
    measurementId: "G-0C770XW4BC"
  };
  // Initialize Firebase
firebase.initializeApp(firebaseConfig);

const projectStorage = firebase.storage("gs://XXX.appspot.com/");

export { projectStorage };

And I want to create a simple NON CHANGING (=constant) gallery.

I suppose it is rather simple, however I was not able to understand how to create the wanted gallery page.

I would appreciate a simple explanation, a simple reference and any code samples would be great!

firebase-storage firebase reactjs
1 Answers

You can use the getDownloadURL method and then use those URLs in <img> tag.

// Create a reference to the file we want to download
var starsRef = storageRef.child('images/stars.jpg');

// Get the download URL
starsRef.getDownloadURL()
.then((url) => {
  // Insert url into an <img> tag to "download"
})

Check out the documentation for a full example. Make sure your security rules allow reading the files.

"All I want, is to display a few images that are known in advance"

If the images are not changing frequently then I'd just upload them and get an URL from the console and paste them in the code rather than make API calls to Firebase Storage. You can get URL in the Firebase console from here:

enter image description here

Right click on the file name and click Copy link address. That URL will not expire unless you revoke the token.

user_131306970
Related