Display (and NOT download) image from firebase storage

Question

This is an image uploaded to imgbb: https://i.ibb.co/Kj9bSGr/cogs.png You will notice that clicking on it will display it in the browser.

This is an image uploaded to Firebase storage: https://firebasestorage.googleapis.com/v0/b/dorg-model.appspot.com/o/uploads%2Fwheeler.png?alt=media&token=ec11456d-7d83-4f1c-9352-36a6a699b718 When you access its address it just triggers a download.

After the setting the correct CORS policy and looking at available questions on this topic, I'm inclined to think that the reason my Flutter web app is not displaying the image is because of the above behavior.

I would like to get the image stored in Firebase to show up in the browser instead of triggering a download.

Answer 1

This is likely due to the file type application/octet-stream instead of image/png. application/octet-stream is the default value when you upload to Firebase Storage.

How to change to image/png

First, create a metadata object (or add to existing metadata) that has the field contentType

const metadata = {
  contentType: 'image/png',
};

Then, upload the file as you would normally, including the metadata as the 3rd argument.

const uploadTask = uploadBytes(storageRef, file, metadata);

You can then use the download URL normally, showing the image instead of downloading it.

Example in Firebase Docs of uploading with metadata

Example in Firebase Docs of adding metadata later

Note: If you use other file formats for images, you can use these MIME types for other image and file formats.