本地打开HTML文件无内容 VS Code Live Server打开正常求助

你遇到的问题核心是路径协议差异导致的资源加载失败：

• 用VS Code的Live Server打开时，页面走HTTP协议，路径开头的/代表项目根目录，能正确匹配到项目里的images文件夹、style.css和script.js资源
• 本地直接打开HTML文件时，页面走File协议，路径开头的/会直接指向磁盘根目录，无法匹配到项目内的资源，CSS加载失败后所有面板元素没有预设高度，就会出现页面全白的情况

1. 把所有图片的绝对路径替换为相对路径，将代码中所有/images/改为./images/：

<!-- 修改前 -->
<div class="panel active" style="background-image: url(/images/messi.jpg);">
<!-- 修改后 -->
<div class="panel active" style="background-image: url(./images/messi.jpg);">

所有panel的background-image路径都按上述规则修改即可。

2. 确认样式、脚本引用路径正确：
   当前style.css和script.js用的是相对路径，只要这两个文件和HTML文件存放在同一文件夹下就可以正常加载，如果存放在子文件夹要对应调整路径，比如CSS放在css文件夹下就改为href="./css/style.css"。

3. 可选兜底处理：
   如果修改路径后仍有显示问题，可打开浏览器F12控制台，切换到Network标签查看是否有资源加载失败，同时可以在style.css中补充全局高度配置，避免元素高度塌陷：

html, body {
  height: 100%;
  margin: 0;
}
.container {
  min-height: 100vh;
}

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