XAMPP环境下HTML页面背景图片加载异常是什么原因？

• 路径拼写错误
  这是最高发的问题，注意HTML中引用路径区分大小写，哪怕Windows本地环境不做限制，后续部署到Linux服务器也会触发异常。优先使用相对路径，比如图片存放在项目根目录的img文件夹下，路径就写./img/background.jpg，禁止写本地绝对路径比如C:\Users\xxx\Desktop\bg.jpg，浏览器会因跨域规则拒绝加载。
• 图片资源本身异常
  确认你使用的是浏览器支持的jpg、png、webp等常规格式，打开源文件确认可以正常预览，不存在下载不全、后缀名误改的情况。
• XAMPP站点配置与访问方式错误
  确认你的HTML文件和所有图片资源都放在XAMPP设置的站点根目录下，默认路径为xampp/htdocs文件夹。不要直接双击打开HTML文件（此时走的是file协议，不是XAMPP的http协议，会触发资源加载规则限制），必须在浏览器地址栏输入http://localhost/你的项目路径/xxx.html访问。如果自定义过站点端口，记得在地址后加上对应端口号。
• CSS语法错误
  检查背景图的CSS写法是否符合规范，参考标准写法：

  body {
    background-image: url("./img/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  

  注意url内的路径无空格时可以不加引号，存在空格时必须加引号，不要漏写括号、分号。
• 浏览器缓存问题
  按Ctrl+F5强制刷新页面，或者打开浏览器开发者工具的「网络」面板，勾选「禁用缓存」后刷新，排除旧缓存导致的加载异常。
• 文件权限问题
  如果你使用的是Mac或Linux版本的XAMPP，确认图片文件的读取权限已经开放，避免权限限制导致http请求返回403错误。

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