如何解决VSCode的Live Server浏览器预览白屏或无法加载本地图片资源的问题-VSCode-PHP中文网

vs code live server白屏主因是gpu初始化失败，与代码无关，需通过启动参数--disable-gpu修复；图片404多因路径含未编码空格或根目录配置错误。

如何解决vscode的live server浏览器预览白屏或无法加载本地图片资源的问题

Live Server 启动后页面白屏，不是代码问题

白屏和图片加载失败是两个独立问题，但常被混为一谈。白屏指整个浏览器窗口空白（仅标题栏可见），根本原因几乎全是 VS Code 渲染进程 GPU 初始化失败，和 Live Server、HTML 内容、路径都无关。

典型现象包括：Help → Toggle Developer Tools 打不开或一闪而过；控制台无报错或只显示 GL_INVALID_OPERATION 类错误；code --verbose 日志中出现 gpu_process_host.cc(1207)。

Windows：右键 VS Code 快捷方式 → 属性 → “目标”末尾追加 --disable-gpu --disable-gpu-compositing
macOS：终端执行 open -n -a "Visual Studio Code" --args --disable-gpu --disable-gpu-compositing
Linux（Wayland）：必须额外加 --ozone-platform=wayland，否则仍可能白屏

注意："disable-hardware-acceleration": true 写进 settings.json 完全无效——这个参数不被 VS Code 识别，必须从启动命令传入。

图片 404 不是路径写错，是空格没编码

本地双击 HTML 文件能显示图片，但 Live Server 启动的 http://127.0.0.1:5500/ 页面报 Failed to load resource: the server responded with a status of 404 (Not Found)，大概率是路径里含未编码的空格。

Live Server 基于 Express，严格遵循 HTTP 规范：URL 中不允许直接出现空格字符；而 file:// 协议在 Chrome/Firefox 中有兼容性“宽容”，会自动解码 %20 或跳过校验，造成“本地能开、服务器打不开”的假象。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

错误路径示例：../World Web/img/logo.svg —— 空格未编码，Live Server 拒绝解析
正确做法：把文件夹名中的空格换成短横线（如 World-Web），或用 Copy Relative Path（右键图片文件）获取已转义路径
绝对路径（如 D:\my project\img.png）在 Live Server 下永远无效——HTTP 服务不读取本地磁盘根路径

相对路径失效？检查 Live Server 的根目录

Live Server 默认以当前打开的文件所在文件夹为服务器根目录，不是工作区根目录，也不是 HTML 文件所在目录的父级。比如你在 /project/src/index.html 右键 Go Live，那么 /project/src/ 就是根，<img src="img/logo.png"> 实际请求的是 http://127.0.0.1:5500/img/logo.png，而非 http://127.0.0.1:5500/src/img/logo.png。

确认方式：打开 Live Server 启动后的地址（如 http://127.0.0.1:5500/），看是否列出文件目录 —— 列出的就是它认定的根
如果项目结构是 /project/public/img/，就应在 public 目录下右键 Go Live，而不是在 index.html 上操作
不想改操作习惯？可在 settings.json 中配置："liveServer.settings.root": "/public"（路径相对于工作区）

`file://` 前缀在 Live Server 下完全无效

有人尝试在 <img> 标签里硬加 file://D:/xxx.jpg 或 file:///D:/xxx.jpg，这在 Live Server 环境下必然失败。现代浏览器出于安全限制，通过 http:// 协议加载的页面禁止发起 file:// 跨协议请求，会直接被 CORS 或混合内容策略拦截。

控制台通常显示类似 Not allowed to load local resource 或 Mixed Content: The page at 'http://...' was loaded over HTTPS, but requested an insecure resource 'file://...'（即使实际是 HTTP，浏览器也会按混合内容处理）。