Firebase部署静态网站后图片不显示是什么原因？

访问你给出的站点测试后，发现图片请求返回404状态码，可按以下顺序排查问题：

• 检查文件名大小写匹配问题
  Firebase Hosting 托管服务大小写敏感，而本地Windows、macOS系统默认文件系统大小写不敏感，所以本地引用Headshot.jpg时，就算实际文件是headshot.jpg或者Headshot.JPG都能正常加载，部署后就会找不到资源。需要确认public目录下的图片文件名、后缀名的大小写和代码里引用的完全一致。
• 检查firebase.json配置规则
  排查配置中的rewrite、redirect、ignore规则是否异常拦截了静态资源，基础托管的默认配置参考如下：

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

如果ignore规则错误把图片文件排除在部署包外，或者有匹配图片后缀的重定向规则，都会导致部署后资源不存在。你可以执行firebase deploy --debug查看部署日志，确认对应的图片文件确实被上传到了托管服务。

• 调整资源引用路径格式
  你当前使用的是相对路径Headshot.jpg，如果页面存在子路由（比如页面路径为https://evanmny.com/about），相对路径会拼接当前路由变成https://evanmny.com/about/Headshot.jpg导致404，建议统一改成根路径绝对路径引用：

<img src="/Headshot.jpg" width="400" class="img-responsive" alt="" align="right" data-aos="fade-right" data-aos-delay="0" />

• 排查CDN缓存问题
  如果是刚完成部署就测试，Firebase的CDN缓存可能还没更新，可以尝试强制刷新页面（Windows按Ctrl+Shift+R、macOS按Command+Shift+R）清除本地缓存，或者在Firebase控制台的托管页面手动清除CDN缓存后再测试。

你可以打开浏览器开发者工具的网络面板，确认图片请求的具体返回状态码：如果是404就重点排查文件名和部署规则，如果是403就排查是否配置了错误的资源访问权限规则。

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