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.
The Firebase SDKs for Cloud Storage add Google security to file uploads and downloads for your Firebase apps, regardless of network quality. You can use our SDKs to store images, audio, video, or other user-generated content. On the server, you can use Google Cloud Storage APIs to access the same files.
Yes. More than that, you can save the image URLs in Cloud Firestore or the Realtime Database for later use. These might be images rendered on the product listing page or other resources like hero images. Yes, it's a quite common approach.
Firebase Hosting provides fast and secure hosting for your web app, static and dynamic content, and microservices.
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.
https://your-project-name.firebaseapp.com/your-image.png
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With