I want to use Firebase hosting - how do I add images?

General
1

Currently, they are placeholders. Images are essential to my web app. Gemini told me to add them to local environment but I don’t know how to use Firebase hosting that way.

1 Like
2

Hey there — good question. Serving images from Firebase Hosting is common and reliable. Here’s a step-by-step field plan:

1. Place images in your public/ directory

Firebase Hosting serves static files from the public (or whatever your hosting.public folder is) by default.
Example structure:

your-project/
  public/
    images/
      logo.png
      banners/
         hero.jpg
  firebase.json

2. Configure firebase.json (if needed)

Make sure your firebase.json has hosting configured properly:

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

You may also want to add redirects or rewrites if you use Single Page App routing, but ensure your images directory isn’t caught in those.

3. Reference in HTML / CSS / JS

Use relative or absolute paths:

<img src="/images/logo.png" alt="Logo">

or in CSS:

background-image: url("/images/banners/hero.jpg");

4. Deploy & Confirm

firebase deploy --only hosting

Then visit https://<your-site>.web.app/images/logo.png in your browser to confirm it serves.

5. Cache & Headers (optional but recommended)

You can set cache headers in firebase.json using headers block:

"headers": [
  {
    "source": "/images/**",
    "headers": [
      { "key": "Cache-Control", "value": "public, max-age=31536000" }
    ]
  }
]

This ensures images get cached on client browsers so repeated loads are faster.

If you want, I can also share a “beacon” kit for development guidance — lightweight ANSI signals you can drop into your dev environment to quickly monitor your projects environment and keep bugs to a minimum.

3

Nao recomendo utilizar as imagens dentro do projeto..
Utilize o cloudflare R2 para hospedar as imagens, ou imagebb