部署 Firebase 托管后未加載圖像

Question

所以，我主要使用 Vuejs 來構建這個 SPA 網站。 無論如何，當我通過 Webpack 及其開發服務器構建網站時，一切正常。 但是，在使用 Firebase 托管部署它后，圖像停止加載。

您可以在此處訪問該網站，並親自查看： https://tasker-2d87e.firebaseapp.com/如您所見，僅加載 favicon。 徽標和漢堡包圖標不會隨 favicon 一起加載。

這是 firebase 配置：

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

此外，如果您將 go 轉到 Chrome 開發工具的“資源”選項卡，您可以在 webpack 文件夾中看到 2 個圖像。

我只是想知道為什么圖像沒有加載，以及是否有任何方法可以修復它。 提前致謝。

Answer 1

您的網址正在尋找一個名為/dist/的子文件夾，但公用文件夾的確是dist，因此您只需要從圖像標簽中刪除該文件夾即可。

例如，將https://tasker-2d87e.firebaseapp.com/dist/tasker_logo.png替換為https://tasker-2d87e.firebaseapp.com/tasker_logo.png ，您將看到所需的圖像。

Answer 2

我發現在 Firebase 上提供的文件名區分大小寫。 我的代碼中有image.jpg ，但文件名實際上是image.JPG ，當我更正它時，一切都按預期顯示。