VS Code 的 Live Preview 不会渲染 <a> 标签中的链接为图像，需改用 <img> 标签并提供合法的 src 属性；同时确保 HTML 结构完整、标签闭合正确。

vs code 的 live preview 不会渲染 `

✅ 正确做法是使用标准 <img> 标签，并确保：

• src 属性指向可公开访问的图片 URL（如你提供的 HTTPS 地址）；
• 添加 alt 属性以提升可访问性与语义规范；
• 整个 HTML 文件结构完整（含 <!DOCTYPE html>、<html>、<body> 等）。

✅ 正确示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>图片预览示例</title>
</head>
<body>
  <h2>这是预览的图片：</h2>
  <img 
    src="/uploads/20260607/17808278996a2546fb67399.jpg" 
    alt="智能手机拍摄样张"
    width="600"
    loading="lazy">
</body>
</html>

? 提示：保存为 .html 文件（如 preview.html），右键选择 “Open with Live Server”（需提前安装 Live Server 扩展），即可在浏览器中实时预览图片。

VS Code Node

通过作为 OpenClaw 节点连接的 VS Code/Cursor IDE 操作代码，提供 40 多种命令，涵盖文件操作、语言智能、Git、测试等功能。

下载

⚠️ 注意事项

• Live Preview 的报错信息（如 “Previewing a file not a child of the server root”）通常与项目路径无关——它只是提醒相对路径可能失效；但对你这个外链图片场景无实质影响，因为 src 是绝对 URL。
• 若后续想加载本地图片，请确保图片文件位于工作区目录内，并使用相对路径（如 src="./images/photo.jpg"），同时用 VS Code 打开整个项目文件夹作为工作区，避免路径解析异常。
• 永远验证 HTML 标签是否成对、闭合，推荐启用 VS Code 的 “Auto Close Tag” 和 “Auto Rename Tag” 插件辅助开发。

掌握 <img> 的基本用法，是前端静态预览的基石——简洁、语义明确、兼容性强。