How to Store "direct link" to an image using Firebase Storage

Question

I need to access an image stored on Firebase Storage by a direct link, eg

http://myfirebasehost.com/storage/imgIwant.png

For all I know, it can only this type of URL using the protocol gs://, however, it is not accessible by link, only in the SDK api.

I need a solution exactly as described above using the Firebase platform, if not possible, accept other suggestions.

My code has constants that are links to images. It turns out that if I want to update this picture, I have to make a new deployment. Instead I want to update the image at the same URL. It would be impossible to do this with the firebase (to my knowledge) because the URL provided by Storage is not accessible by link.

Another alternative might be to convert an image to base64 and stored in the database, but would be very extensive and impractical.

Answer 1

If your want your images to be public -

Add this to your storage rules

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

And then you can use it like

export const getMedia = (folderId, mediaId) =>`https://firebasestorage.googleapis.com/v0/b/${process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET}/o/${folderId}%2F${mediaId}?alt=media`;

Answer 2

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

You can try this because it allow public read access

Answer 3

To convert into a public URL check example.

Suppose the link is gs://funzone-website.appspot.com/public/logo.jpg

let g=funzone-website.appspot.com/public/logo.jpg

replace file path with % if there is a folder. In the above example, the public is a folder, add ?alt=media and add o.

Now g=funzone-website.appspot.com/o/public%2Flogo.jpg?alt=media

convert and replace path(/) with %2F

To convert this use https://firebasestorage.googleapis.com/v0/b/{g}

or

https://firebasestorage.googleapis.com/v0/b/funzone-website.appspot.com/o/public%2Flogo.jpg?alt=media

If there is no folder(public) then the link is

https://firebasestorage.googleapis.com/v0/b/funzone-website.appspot.com/o/logo.jpg?alt=media

Answer 4

2020

Firebase is connected to Google Cloud Platform:

You need to make the bucket or the desired objects public on Google Cloud Platform and there you will get a simple link without any need to edit it:

Making data public

You can also use the link without making the data public (but then you will have to be signed in to access) :

Go to Google Cloud Platform > select your project > Storage > Browser > Open bucket appID.appspot.com > open any object and there you have both uri (that Firebase console provides) and the URL.

• I tried all the given methods here but they don't work anymore

Answer 5

Another option is an URL of the format:

https://storage.googleapis.com/PROJECT-ID/FILEPATH

PROJECT-ID: project ID of Firebase project

FILEPATH: path to project file

Answer 6

Year 2020, I had quite a hard time figuring this out, especially because of the limitations of the CharacterSet in Swift for encoding a String (or most probably I'm missing something).

Here are the steps how I managed to convert a "path" (folder path) of a Blob on Firebase Storage (after upload).

1. Given a storage metadata after upload, (in iOS, we have the class called FIRStorageMetadata.) get the string objects called path and bucket.

2. Encode properly the path string! This is important! If you miss a character, obviously you'll get an error when you attempt to download the complete direct URL.

   • In iOS, I encode the path string using the CharacterSet urlHostAllowed. BUT, this is not enough, like I said in the above, it is either there is no CharacterSet that encodes a string into a URL including the "+' plus sign. So after encoding using the urlHostAllowed, I call replace occurrence string method, replace "+" with "%2B"
   • One way to test if you are encoding the path string correctly is to compare your encoding result with the one you can get from the Firebase Storage UI.

3. Concatenate the strings:

   • "https://firebasestorage.googleapis.com/v0/b/"
   • bucket object
   • "/o/"
   • correctly encoded path object.
   • "?alt=media"

Voila!

FAQs

1. Can we omit the token? Yes, certainly. It just works. Been doing it ever since I learned it.
2. Can we omit the ?alt=media? Nope! You'll just get a string in json format and not the file.

Answer 7

How to translate your gs storage location to a direct url by example:

gs://nobs-f32f2.appspot.com/profile/1s_by_wlop-dc1sdan.jpg

becomes

https://firebasestorage.googleapis.com/v0/b/nobs-f32f2.appspot.com/o/profile%2F1s_by_wlop-dc1sdan.jpg?alt=media

1st be sure to URL escape your blob path. For example, swap forward slashes (/) for %2F and spaces () for %20.

2nd be sure you've open read access where needed. Here is an open rule to get moving:

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

Answer 8

For those who just want to get a link

In console > Storage

Select a specific photo and you will see the link below.

Answer 9

With Firebase Storage, you're given two URLs that you can use to represent files:

// "Private" internal URL, only accessible through Firebase Storage API
// This is protected by Firebase Storage Security Rules & Firebase Auth
gs://bucket/object

// "Public" unguessable URL, accessible by anyone with the link
// This is secured because that token is *very* hard for someone to guess
https://firebasestorage.googleapis.com/v0/bucket/object?alt=media&token=<token>

The first option requires that you use the reference.getDownloadURL() method to convert the internal gs:// URL into a public https:// URL.

The second option allows you to share this public but unguessable URL with trusted individuals, and allows them to access content without authentication to Firebase or using your app--think sharing family photos with Google Photos. Likely this behavior will be good enough, unless you desire public sharing with clean URLs. You can use this URL in a browser, or use any other HTTP library to download it. We provide the ability to download these files as well (off a reference), so you don't need to get a third party library, you can just use us.

I strongly recommend reading our docs for more information on this.