React部署Firebase Hosting后从Firestore读取图片路径无法加载问题

一、React项目中public文件夹的默认访问规则 #

放在public目录下的静态资源，构建部署后直接对应网站的根路径。例如：

• 本地路径：public/img/bonk.jpeg
• 部署后正确访问路径：https://yourdomain.com/img/bonk.jpeg

二、你的操作中可能存在的错误及排查步骤 #

1. 路径格式错误
   你的报错路径是https:somewebsite/img/bonk.jpeg，明显缺少了协议后的//，这会导致浏览器无法正确解析资源地址。必须确保Firestore中存储的路径是完整格式：https://somewebsite/img/bonk.jpeg。
   另外注意Linux环境（Firebase Hosting基于Linux）区分文件名大小写，比如Bonk.jpeg和bonk.jpeg会被视为不同文件，要保证本地文件名与Firestore中的路径完全一致。

2. 资源未被正确打包
   执行npm run build后，检查生成的build文件夹中是否存在img/bonk.jpeg：

   • 如果不存在，说明本地public/img的结构有问题，确认图片确实放在public目录下的img文件夹内，不要手动修改build文件夹内容，React会自动复制public下的所有资源到build对应位置。

3. Firebase Hosting重写规则冲突
   若你配置了SPA重写规则（比如"rewrites": [{"source": "**", "destination": "/index.html"}]），可能导致静态资源被错误路由到页面入口。可以在firebase.json中添加针对图片资源的例外规则：

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

   确保img目录下的资源不会被重写，直接返回文件。

4. 缓存问题
   Firebase Hosting会缓存静态资源，若之前部署过错误版本，可能存在缓存残留。可以执行强制部署命令刷新缓存：

   firebase deploy --only hosting --force
   

   或在浏览器中按Ctrl+F5强制刷新页面。

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