VS Code中img路径标红主因是HTML语言服务默认不校验src路径，或插件干扰、未以文件夹形式打开项目、路径含空格/大小写错误。
VS Code 里 <img src="..."> 路径标红，不是 HTML 语法错误，也不是图片真丢了——是 VS Code 的 HTML 语言服务压根没把那个路径当“有效资源路径”来解析。
为什么 src 路径会标红？HTML 语言服务不认相对路径
VS Code 默认只对 <link href>、<script src></script> 和部分 CSS 属性做路径校验，但对 <img src>、<iframe src></iframe>、background-image 等静态资源引用，默认不启用文件系统路径检查。标红往往来自其他插件（比如 ESLint、HTMLHint）或误配的自定义验证规则。
- 检查右下角状态栏：如果显示“HTML (ESLint)”或“HTML (Hint)”，说明是插件在报错，不是 VS Code 自身行为
- 打开命令面板（
Ctrl+Shift+P），运行Developer: Toggle Developer Tools，看 Console 里是否有Failed to resolve path类日志 - 临时禁用所有插件，重启 VS Code，再开 HTML 文件——如果标红消失，就是某个插件干扰了
Live Server 启动后图片 404，但路径写得明明没错
这是最典型的“路径理解错位”：你写的路径对，但 VS Code + Live Server 没按你预期的方式解析它。根本问题出在空格、大小写、URL 编码和工作区根目录认定上。
- 路径中含空格（如
my image.png）→ 浏览器请求时变成my%20image.png，但文件系统里仍是带空格的原名 → 404 - Windows 上文件夹名
Images，你在 HTML 里写src="images/logo.png"→ Linux/macOS 下直接 404（大小写敏感） - 你用“文件 → 打开文件”打开单个
index.html，而不是“文件 → 打开文件夹” → VS Code 不知道项目根在哪，./和../参考点错乱 - Live Server 默认以你“右键点击的 HTML 文件所在目录”为服务器根，不是工作区根——如果 HTML 在
src/pages/下，它就从src/pages/提供服务
怎么让 VS Code 正确识别并补全图片路径？
纯 HTML 场景下，VS Code 原生不提供 src 路径补全。要获得类似体验，必须靠插件 + 规范结构配合，且不能依赖“自动猜路径”。
- 安装
Path Intellisense插件，然后在工作区.vscode/settings.json中配置："path-intellisense.mappings": { "assets": "${workspaceFolder}/assets", "images": "${workspaceFolder}/images" } - 确保项目是以文件夹形式打开的（
File → Open Folder），否则${workspaceFolder}为空 - 在
<img src="">引号内输入images/，插件才会触发补全；输入../或./开头的路径，它通常不响应 - 别指望它补全扩展名：默认不加
.png或.jpg，需手动敲或配"path-intellisense.extensionOnImport": true
真正该盯住的三个硬性条件
路径能跑通、不标红、预览正常，只取决于三件事是否全部满足——少一个，就可能在某个环节崩掉。
-
index.html必须放在你通过Open Folder打开的那个文件夹下，或其子目录中 - 所有图片路径必须是相对于
index.html文件位置的正确相对路径（.、..、./sub/），不是相对于项目根、不是相对于 VS Code 窗口、更不是绝对路径 - 文件名和文件夹名必须不含空格、中文、特殊符号；大小写必须与磁盘中完全一致（尤其跨平台协作时）
最容易被忽略的是第三条：你以为重命名文件夹只是改个名，其实是在改整个路径契约。一旦改了，所有引用它的 HTML、CSS、JS 都得同步更新——没有自动映射，也没有别名兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
