Reactjs相册应用部署Firebase后图片无法显示求助

核心问题分析 #

你本地环境用localhost:3000作为图片路径前缀，部署到Firebase后，这个前缀不再指向你的应用域名，导致图片请求路径错误，无法加载。

具体修复步骤 #

• 修改JSON中的图片路径：打开存储图片路径的JSON文件，把所有带http://localhost:3000的绝对路径改成根相对路径（去掉localhost前缀，保留/开头）。
  比如：
  原路径："imgUrl": "http://localhost:3000/images/sample.jpg"
  修改后："imgUrl": "/images/sample.jpg"
• 确认图片存放位置：确保图片文件放在React项目的public文件夹下（比如public/images/），React打包后会自动将public目录下的文件复制到build文件夹，Firebase Hosting会正确托管这些静态资源。
• 验证Firebase部署配置：检查项目根目录的firebase.json，确认hosting.public字段指向build（React打包后的输出目录），配置示例：

  {
    "hosting": {
      "public": "build",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  }
  

• 重新打包并部署：执行npm run build重新生成打包文件，再用firebase deploy重新部署到Firebase，之后刷新应用即可看到图片正常加载。

内容的提问来源于stack exchange，提问作者CaptainBeatty