Displaying Images from Firebase Cloud Firestore + Cloud Storage?

0
votes

I'm using Cloud Firestore (Database) and Cloud Storage (Image storage), but I'm not sure exactly how to display images.

Questions:

  • Am I loading this correctly in Cloud Firestore?
  • Am I missing something with the Access token?

Process/Steps Taken:

  1. I manually loaded each image to Firebase Cloud Storage
  2. I then took the storage location of each image and applied it to the necessary object in my JSON file, which looks like this
"agency_logo": "gs://PROJECT_NAME_HERE.appspot.com/logos/CityLogo1.png",
  1. Now that I have all of the images mapped correctly in the JSON file and loaded, I'm mapping the imported JSON to the AgencyCard React component:
  // Render Logos
  const renderLogos = () => {
    return images.logos.map((logo, i) => (
      <AgencyCard
        key={i}
        agencyName={logo.agency_name}
        agencyLogo={logo.agency_logo}
      />
    ));
  };
  1. Here's how the image is passed down to props:
<div id="agency-image-container">
  <img id="agency-image" src={props.agencyLogo} />
</div>
  1. What is rendering as the image:

e

1
reactjsfirebasegoogle-cloud-firestoregoogle-cloud-storage

1 Answers

1
votes

Browsers don't know how to load gs:// type URLs. That's a special URL used only by Cloud Storage for use only with other Google Cloud products. You will have to generate some sort of https download URL if you want to load it in a img tag. Consider a Firebase download URL or a Cloud Storage signed URL.