html编辑器的src路径补全依赖文件系统感知能力，仅在src、href等白名单属性中生效，且需光标紧贴引号内、项目以文件夹形式打开、无插件干扰；不同标签（img/link/a）补全范围不同，深度嵌套或自定义别名需插件（如path intellisense）及正确配置支持。
HTML 编辑器本身不提供路径自动补全，真正起作用的是编辑器对 src、href 等属性值的文件系统感知能力，且仅在特定上下文生效。
为什么 src=" 后没弹出本地文件路径？
这不是 HTML 语法问题，而是编辑器未激活「路径建议」功能或当前路径上下文不合法：
- VS Code 默认只在
src、href、data-src等白名单属性中触发路径补全，style="background:url()"里不会响应 - 路径必须以
"或'开头，且光标紧贴引号内（如src="|"），中间有空格或换行会中断识别 - 若项目未打开为文件夹（而是单个 .html 文件双击打开），VS Code 无法读取相对路径结构，补全直接失效
- 某些插件（如
auto-close-tag）会劫持引号输入逻辑，导致引号未正确成对，路径补全引擎无法启动
img 和 link 标签中路径补全的行为差异
不同标签对路径类型有隐式约束，影响补全内容：
-
<img src="%7C">：默认只提示图片类扩展名（.png、.jpg、.svg），不显示.js或.html -
<link href="%7C">：优先列出.css文件，若同目录存在style.css，它会排在第一位 -
<a href="%7C"></a>：补全范围最宽，包括所有可读文件，但会过滤掉隐藏文件（.gitignore、.DS_Store） - 路径层级越深，补全响应越慢；超过 5 层嵌套时，VS Code 可能跳过扫描，需手动输入前缀缩小范围（如先输
assets/img/再按 Ctrl+Space）
如何让自定义路径别名（如 @/）也被补全？
原生编辑器不识别 Webpack/Vite 的路径别名，必须靠配置桥接：
- VS Code 需安装
Path Intellisense插件，并在settings.json中配置"path-intellisense.mappings"映射别名到真实路径 - 例如：将
@/components/映射到src/components/，否则输入@/c不会触发任何建议 - Vue/Svelte 项目中，
<template></template>区域的路径补全依赖语言服务器（如 Volar），纯 HTML 插件无效，需确认右下角语言模式是vue而非html - 使用
jsconfig.json或tsconfig.json中的compilerOptions.paths配置，仅对 TypeScript/JS 文件有效，不影响 HTML 属性值补全
路径补全最常被忽略的一点：它不校验文件是否存在，只做文件系统遍历。你可能补全出一个看似正确的路径，但实际文件已被重命名或移走——运行时 404 仍会发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
