GitHub Pages中background-image等属性设置的SVG背景不显示求助

排查解决步骤 #

• 路径大小写校验
  GitHub Pages 所用的 Linux 服务器对文件路径大小写完全敏感，而本地 Windows、macOS 系统默认大小写不敏感。请逐一核对 CSS 中书写的 SVG 路径、文件名的大小写，与 GitHub 仓库中实际文件的路径、大小写完全匹配，比如./images/bg-pattern-desktop.svg和./Images/Bg-Pattern-Desktop.svg在部署环境会被识别为完全不同的路径。
• Sass 编译路径校验
  你在.scss源文件中书写的相对路径是相对于 Sass 源文件位置的，编译输出 CSS 文件后，路径会变成相对于最终 CSS 文件的位置。如果你的 Sass 源文件和编译后 CSS 文件不在同一层级目录，本地开发服务可能做了路径代理所以加载正常，部署后就会出现路径错误。可以打开部署页面的开发者工具，找到对应元素查看计算后的background/background-image属性值，直接访问该资源地址确认是否返回404即可验证。
• 构建配置校验
  如果你使用了自动化构建工具，确认构建配置中是否将 SVG 资源正确拷贝到了部署产物目录。部分开发环境下会直接读取源码目录的资源，构建阶段如果没有配置资源拷贝规则，部署产物里就会缺失对应的 SVG 文件，导致线上加载失败。
• SVG 文件本身校验
  如果上述步骤都确认没有问题，直接访问线上 SVG 资源地址，若出现无法渲染、自动下载的情况，检查 SVG 源码是否存在语法错误，是否有未闭合的标签、非法字符等问题。

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