部署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，您会看到想要的图像。