Firebase Storage - URL for image services

Question

I'm trying to get Firebase Storage to work with an image service like Imgix or Cloudinary. However, the download URL's that Firebase provides, do not seem to work with these services.

For example: Cloudinary says you can fetch images like this:

http://res.cloudinary.com/demo/image/fetch/http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_C%C3%A9sars_2014.jpg

However, my download URL looks more like this:

https://firebasestorage.googleapis.com/v0/b/project-503247351211329470.appspot.com/changedsoitdoesnotwork/o/O8Hv4nKOyGgcCyOLoVLH7cQw48y2%2Fimages%2F1.jpeg?alt=media&token=28eabf76-f85b-45aa-das3-fd945729d7c2

I changed some characters in the above url, so it won't work since I don't want a gazillion requests from Stackoverflow. :)

Is there something I can do differently? Can I perhaps make requests straight to the Storage Bucket?

Answer 1

You can absolutely use a service like Imgix or Cloudinary with Firebase Storage URLs--the issue here (as is true with 99% of cases like this) is that the URL needs to be percent escaped when used in the fetch.

If we have a URL like: https://firebasestorage.googleapis.com/v0/b/fir-cloudvisiontest.appspot.com/o/images%2Fimage.jpg?alt=media&token=TOKEN

It will need to be escaped to something like: https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Ffir-cloudvisiontest.appspot.com%2Fo%2Fimages%252Fimage.jpg%3Falt%3Dmedia%26token%3D61d35caf-b209-485f-8248-a3c2aa717468 (yes, it actually re-escapes the escaped any percent encoding).

That would result in a Cloudinary URL which looks like: http://res.cloudinary.com/<your-project>/image/fetch/https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Ffir-cloudvisiontest.appspot.com%2Fo%2Fimages%252Fimage.jpg%3Falt%3Dmedia%26token%3DTOKEN

Given service differences in tolerance for URL encoding, your mileage may vary, so I recommend testing URLs with a tool like http://meyerweb.com/eric/tools/dencoder/ to verify that your images work.

Answer 2

When using any of the cloudinary SDKs, you can create a fetch URL using the url() method. The following example uses the JavaScript SDK:

var cl = cloudinary.Cloudinary.new( {cloud_name: "<your cloud>"});
var storageRef = firebase.storage().ref();

storageRef.child('images/image.jpg').getDownloadURL().then(function(url) {
  var cloudinary_url = cl.url(url, {type: "fetch"});
  // Do something with the URL...
  console.log(cloudinary_url);
}

This will ensure that the URL is properly encoded.