VS Code Live Server仅默认浏览器正常 其他浏览器打开页面图片CSS加载失败

1. 路径解析规则差异：VS Code Live Server启动时会在本地运行HTTP服务，对图片引用路径的解析以项目根目录为基准，你写的根路径（比如/img/pic.png）、相对路径都能正确匹配资源。直接双击打开index.html时走的是file:///本地文件协议，此时路径开头的/会被解析为本地磁盘根目录，而非你的项目文件夹，导致资源匹配失败。
2. 文件夹结构不匹配：如果单独将index.html移出项目文件夹打开，相对路径引用的图片也会因为层级不对应无法找到。

• 所有静态资源统一使用相对路径引用，不要使用开头带/的根路径写法。例如你的index.html存放在项目根目录，图片存放在项目根目录下的images文件夹中，引用格式写为./images/xxx.png即可。
• 本地测试优先通过VS Code Live Server启动页面，和线上部署的HTTP环境规则一致，可避免路径、跨域等各类本地文件协议的兼容问题。
• 如果必须直接打开本地HTML文件，需保持整个项目的文件夹结构完整，不要单独移动index.html到其他路径打开。

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