直接在浏览器打开HTML页面背景图加载失败 VS Code Live Server打开正常

核心原因 #

• 路径解析规则差异：Live Server基于HTTP服务运行，/开头的根相对路径会解析为项目根目录下的资源；直接用file://协议打开本地HTML时，/开头的路径会被解析为系统磁盘根目录，导致资源定位失败。
• 浏览器安全策略限制：现代浏览器对file://协议的本地资源默认开启跨域拦截，CSS引用的背景图常被判定为跨域资源被拦截；<video>标签默认跨域策略更宽松，因此可以正常加载。

可落地解决方案 #

• 调整背景图路径写法：将CSS中/开头的根相对路径改为相对于CSS文件的相对路径，例如CSS文件存放在css/目录，图片存放在images/目录时，将路径写为background-image: url(../images/xxx.jpg)即可兼容两种打开场景。
• 临时解除浏览器限制（仅测试用）：给Chrome浏览器添加启动参数--allow-file-access-from-files，关闭所有Chrome进程后重启即可允许本地文件互访。
• 常规开发推荐使用本地HTTP服务：除了VS Code Live Server外，也可以在项目目录下执行python -m http.server（Python3环境）或npx http-server（Node.js环境）启动本地服务访问，彻底规避file://协议的各种限制。

排查参考截图 #

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