Firebase storage

You can configure ImageKit.io to fetch images from your Firebase storage. This allows you to start using ImageKit.io real-time image resizing, optimization, and fast CDN delivery for thousands or millions of existing images within minutes. Also, you get to leverage Firebase's authentication and authorization in your application.
Note: We do not start copying images from your storage as soon as you add the origin. Instead, we will fetch the particular image when you request it through ImageKit.io URL-endpoint. Learn more to understand how this works. The images accessed from this origin will not appear in your Media library.
Step 1: Configure origin
1.Go to the external storage section in your ImageKit.io dashboard, and under the Origins section, click on the "Add origin" button.
2.Choose Web server from the origin type dropdown.
3.Give your origin a name. It will appear in the list of origins you have added. For example - My Firebase Storage.
4.Enter https://firebasestorage.googleapis.com in the base URL field.
5.Leave the advanced options as it is for now.
6.Click on the Submit button.
Step 2: Access the image through ImageKit.io URL-endpoint
When you add your first origin in the dashboard, the origin is by default made accessible through the default URL-endpoint of your ImageKit.io account. For subsequent origins, you can either create a separate URL-endpoint or edit existing URL-endpoint (including default) and make this newly added origin accessible by editing the origin preference list. 
Let's look at a few examples to fetch the images:
Original image through Firebase storage (old URL)
https://firebasestorage.googleapis.com/rest-of-the-path.jpg?alt=media&token={TOKEN}​
The same master image using ImageKit.io URL-endpoint
https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.jpg?alt=media&token={TOKEN}​
Resized 300x300 image
https://ik.imagekit.io/your_imagekit_id/tr:w-300,h-300/rest-of-the-path.jpg?alt=media&token={TOKEN}​
So when you request https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.jpg?alt=media&token={TOKEN}, ImageKit.io internally fetches the file from https://firebasestorage.googleapis.com/rest-of-the-path.jpg?alt=media&token={TOKEN}
URL structure
1
            URL-endpoint                transformation      image path                                    
2
┌─────────────────────────────────────┐┌─────────────┐┌───────────────────┐
3
https://ik.imagekit.io/your_imagekit_id/tr:w-300,h-300/rest-of-the-path.jpg
Copied!
If you get a "Not found" error while accessing the image, check out this troubleshooting guide.
​🧙♂
Tips: You can also use a custom domain like images.example.com.
Step 3: Integrate and Go live
To start using the ImageKit.io URL-endpoint in your application you will need to replace the base URL of images in your application code. Here are the steps and code samples:
1.Get the Firebase URL for the asset by calling .getDownloadURL() method on the storage reference.
2.In the above download URL replace https://firebasestorage.googleapis.com with your ImageKit.io URL-endpoint.
Web
iOS
Android (Java)
1
storageRef.child('images/stars.jpg').getDownloadURL().then(function(url) {
2
  // `url` is the download URL for 'images/stars.jpg'
3
  
4
  // Replace the firebase URL with ImageKit.io URL-endpoint
5
  url = url.replace("https://firebasestorage.googleapis.com","https://ik.imagekit.io/your_imagekit_id");
6
​
7
  // This can be downloaded directly:
8
  var xhr = new XMLHttpRequest();
9
  xhr.responseType = 'blob';
10
  xhr.onload = function(event) {
11
    var blob = xhr.response;
12
  };
13
  xhr.open('GET', url);
14
  xhr.send();
15
​
16
  // Or inserted into an <img> element:
17
  var img = document.getElementById('myimg');
18
  img.src = url;
19
}).catch(function(error) {
20
  // Handle any errors
21
});
Copied!
1
// Create a reference to the file you want to download
2
let starsRef = storageRef.child("images/stars.jpg")
3
​
4
// Fetch the download URL
5
starsRef.downloadURL { url, error in
6
  if let error = error {
7
    // Handle any errors
8
  } else {
9
    /*
10
       Replace https://firebasestorage.googleapis.com 
11
       with your ImageKit.io URL-endpoint.
12
    */
13
    let imageKitURL = url.replacingOccurrences(of: "https://firebasestorage.googleapis.com", with: "https://ik.imagekit.io/your_imagekit_id")
14
    // Use imageKitURL in your application
15
  }
16
}
Copied!
1
storageRef.child("users/me/profile.png").getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
2
    @Override
3
    public void onSuccess(Uri uri) {
4
        // Got the download URL for 'users/me/profile.png'
5
        
6
        /*
7
           Replace https://firebasestorage.googleapis.com 
8
           with your ImageKit.io URL-endpoint.
9
        */
10
    }
11
}).addOnFailureListener(new OnFailureListener() {
12
    @Override
13
    public void onFailure(@NonNull Exception exception) {
14
        // Handle any errors
15
    }
16
});
Copied!
Next steps
Now start using ImageKit.io URL endpoint in your application to accelerate image loading.
Get started with our quick start guides and SDKs:
Getting started
SDK
Learn about real-time image resizing:
Image Transformations

Digital Ocean Spaces

Google Cloud storage

Last modified 1yr ago

Copy link

Contents

Step 1: Configure origin

Step 2: Access the image through ImageKit.io URL-endpoint

Step 3: Integrate and Go live

Next steps