images not displaying on firebase hosting

Question

i have react + vite app that's hosting on firebase.

the problem is that images are not loading, leaving only default blank img, here's the screenshot: screenshot

i'm pretty sure the firebase just can't find images, or it's just me who chooses the wrong paths to images. here's example of how i use imgs:

            <img src="src/assets/logo.png" alt="main logo" />
            <img src="/src/assets/icons/AboutUsIcon.png" alt="about us" />
            <img src="/src/assets/icons/blogIcon.png" alt="blog" />

as you can see from the paths, my images located in src/assets folder.

after research my guess is that the problem in my firebase.json, that's looking like this:

{
  "hosting": {
    "source": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "europe-west1"
    }
  }
}

Answer 1

The images are in your app's src directory, not any public directory or Firebase. The project's src directory isn't accessible when the app is built, and deployed/served from a hosting service.

Import and reference them in code accordingly.

Example:

import logo from "/assets/logo.png";
import aboutUsIcon from "/assets/icons/AboutUsIcon.png";
import blogIcon from "/assets/icons/blogIcon.png";

...

<img src={logo} alt="main logo" />
<img src={aboutUsIcon} alt="about us" />
<img src={blogIcon} alt="blog" />