How To Host An Image With Firebase Hosting?

Question

Issue

How do I host an image file with Firebase hosting?

I'm currently going through the steps in Firebase In App Messaging to setup messages to show to the user within the app. When asked to provide an Image URL for the message the UI suggests using Firebase hosting . I have followed the setup instructions and have successfully hosted my first site.

I cannot find documentation regarding hosting an image resources such as a png file that can route to a specific URL.

Setup

Hosting Configuration

Hosting Success

Answer 1

Solution

Under the public directory which is the default directory when initializing Firebase Hosting, simply add the image resource file such as a png.

Once the resources are deployed you can refer to the resource in the url.

File Structure

Url To Image

https:// your-project-name .firebaseapp.com/ your-image .png

Answer 2

You could also use Firebase Storage for storing files such as images.

❗️Loading times will be slower, due to the need of the request, but you can change images on your website without having to redeploy it (like switch logo.png for another image and it will just change on the website).

You can upload them manually in console and then retrieve them with Javascript:

import { getStorage, ref, getDownloadURL } from "firebase/storage";

const storage = getStorage();
getDownloadURL(ref(storage, 'images/stars.jpg'))
  .then((url) => {
    // `url` is the download URL for 'images/stars.jpg'

    // insert into an <img> element
    const img = document.getElementById('myimg');
    img.setAttribute('src', url);
  })
  .catch((error) => {
    // Handle any errors
  });

⬇️

From Google Docs