CODEWITHSUNDEEP
reactjsfirebasefirebase-storage
Paramveer Kahlon
Paramveer Kahlon

Reputation: 15

trying to get image using fetch, the image is stored in firebase storage

Hy, I am trying to get the image using fetch API, the URL is valid, as it works when I put the image URL in the Img tag.

my fetch function:

   getImage = () => {  
   const url= "https://firebasestorage.googleapis.com/v0/b/alpha-c790f.appspot.com/o/images%2Frivers.jpg?alt=media&token=6a96d672-23c1-425f-bdca-47f6d73608f0"


fetch(this.state.url,{
  mode: 'no-cors'
}).then(response => response.blob())
.then((res)=>{
     console.log(res);
    var objectURL = URL.createObjectURL(res);
    var myImage = new Image();
    myImage.src = objectURL;

}).catch(err=>{
  console.log(err);
})
}

the firebase cloud storage access rules :

      rules_version = '2';
      service firebase.storage {
      match /b/{bucket}/o {
           match /{allPaths=**} {
           allow read, write: if request.auth != null;
           }
        }
    }

I want to implement it like this because I want to put a spinner on it until the image comes

The response I get is this

           Blob {size: 0, type: ""}
                 size: 0
                 type: ""
            __proto__: Blob

Upvotes: 0

Views: 738

Answers (1)

Josh Pittman
Josh Pittman

Reputation: 7324

You don't need to fetch an image, the image already exists at this url https://firebasestorage.googleapis.com/v0/b/alpha-c790f.appspot.com/o/images%2Frivers.jpg?alt=media&token=6a96d672-23c1-425f-bdca-47f6d73608f0

<img src='https://firebasestorage.googleapis.com/v0/b/alpha-c790f.appspot.com/o/images%2Frivers.jpg?alt=media&token=6a96d672-23c1-425f-bdca-47f6d73608f0'/>

If you would like to construct the image procedurally you can also do:

var newImgage = new Image() 
newImgage.src = 'https://firebasestorage.googleapis.com/v0/b/alpha-c790f.appspot.com/o/images%2Frivers.jpg'

Upvotes: 1

Related Questions