Public文件夹内图片本地无法显示但GitHub Pages正常，求原因

这问题核心是路径解析规则在本地开发和GitHub Pages部署时的差异，具体原因和解决办法如下：

原因分析 #

1. 相对路径的解析逻辑不同
   本地开发时，你的组件文件大概率在src目录的子文件夹里（比如src/components/xxx），此时写./assets/fb-icon.svg，浏览器会基于当前组件文件的位置去查找，也就是找src/components/assets/fb-icon.svg，但你的图片实际在Public/assets/下，自然找不到。而GitHub Pages部署后，项目的根目录就是Public的根，相对路径./assets直接指向根目录下的assets文件夹，所以能正常加载。

2. 框架静态资源的引用规范
   像React、Vue这类框架，Public文件夹是专门存放静态资源的目录，框架会把这个目录作为静态资源的根路径。引用这里的资源时，应该用绝对路径（以/开头），而不是相对路径，这样本地开发服务器和部署环境都会从根目录去查找资源。

解决办法 #

• 修改引用路径，把./assets/xxx.svg改成/assets/xxx.svg，示例代码：

  <Link src="/assets/fb-icon.svg" />
  <Link src="/assets/yt-icon.svg" />
  <Link src="/assets/twitter-icon.svg" />
  <Link src="/assets/ig-icon.svg" />
  

• 检查文件名和路径的大小写：本地Windows系统不区分文件名大小写，但GitHub Pages运行在Linux环境下，大小写敏感，确保引用的文件名和实际文件完全一致（比如别把FB-icon.svg写成fb-icon.svg）。
• 打开浏览器控制台的「网络」标签，查看图片的请求路径，如果显示404，就能确认是路径解析错误，按照上面的方法修正即可。

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