部署 Firebase 托管后未加载图像

Question

所以，我主要使用 Vuejs 来构建这个 SPA 网站。无论如何，当我通过 Webpack 及其开发服务器构建网站时，一切正常。但是，在使用 Firebase 托管部署它后，图像会停止加载。

您可以访问这里的网站，亲自查看：https://tasker-2d87e.firebaseapp.com/ 如您所见，仅加载图标。徽标和汉堡图标不会随网站图标一起加载。

这是 firebase 配置：

{
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ],
    "source": "functions"
  },
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

另外，如果你进入 Chrome 开发工具的“资源”选项卡，你可以看到 webpack 文件夹中的 2 张图片。

我只是想知道为什么图像没有加载，以及是否有任何方法可以修复它。提前致谢。

Answer 1

您的 URL 正在寻找一个名为 /dist/ 的子文件夹，但公用文件夹确实是 dist，因此您只需将其从图像标签中取出即可。

例如，将https://tasker-2d87e.firebaseapp.com/dist/tasker_logo.png 替换为https://tasker-2d87e.firebaseapp.com/tasker_logo.png，您将看到您正在寻找的图像。