VS Code Live Server正常但直接打开HTML文件丢失CSS资源求助

• 先排查路径问题，这是最常见的原因：

  • 绝对路径（比如C:\project\img\bg.png）或者根路径开头的路径（比如/img/bg.png）在直接打开HTML时会失效。Live Server是HTTP服务，根路径指向项目文件夹；但直接打开是file协议，根路径是磁盘根目录，自然找不到资源。
  • 改成相对路径：比如HTML在项目根目录，图片在img文件夹里，就写img/bg.png或者./img/bg.png；如果CSS在css文件夹里，引用上层的图片就写../img/bg.png。

• 验证资源是否加载成功：

  • 按F12打开浏览器开发者工具，切换到Network标签，刷新页面后看CSS、图片的请求状态。如果显示404，说明路径写错了，照着路径提示修正就行。

• 举个项目结构的例子，对应正确的路径写法：

  my-project/
  ├ index.html
  ├ css/
  │  └ style.css
  ├ img/
  │  └ bg.png
  

  • HTML里引入CSS：<link rel="stylesheet" href="./css/style.css">
  • CSS里引用图片：background-image: url('../img/bg.png');

• 内边距失效大概率是CSS文件没加载成功，先确保CSS路径正确，加载成功后样式自然生效。

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