How To Host An Image With Firebase Hosting?

user_2253682 0
Viewed 7673

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.

enter image description here

Setup

Hosting Configuration

enter image description here

Hosting Success

enter image description here

firebase-hosting firebase web-hosting hosting
2 Answers

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

enter image description here

Url To Image

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

user_22536820

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

user_87099280
Related