图像未在 Firebase 托管上显示

Question

我有在 firebase 上托管的 React + vite 应用程序。

问题是图像没有加载，只留下默认的空白img，截图如下：

我很确定 Firebase 找不到图像，或者只是我选择了错误的图像路径。这是我如何使用 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" />

正如您从路径中看到的，我的图像位于 src/assets 文件夹中。

经过研究，我的猜测是我的 firebase.json 中的问题，看起来像这样：

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

Answer 1

图像位于应用程序的

src

目录中，而不是任何公共目录或 Firebase 中。当构建应用程序并从托管服务部署/提供服务时，无法访问项目的

src

目录。

相应地在代码中导入并引用它们。

示例：

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" />