图片路径报404主因是开发时混用file://与http://协议导致路径解析差异，应统一使用webstorm内置服务器并启用missing file reference检查。
为什么图片路径报404但代码看着没问题
WebStorm 的代码检查本身不直接校验图片是否存在，但它能通过路径补全、悬停预览和错误标记间接暴露引用问题。真正导致 404 的常见原因，是路径语义与 WebStorm 内置服务器行为不一致：比如用 src="/images/logo.png" 时，WebStorm 默认以项目根目录为 HTTP root；而双击打开 HTML 文件走的是 file:// 协议，此时 / 指向磁盘根目录，必然失败。
- 确认运行方式：必须用 WebStorm 的「Open in Browser」或「Run with Live Server」（需安装插件），不能双击 HTML 文件
- 检查实际服务地址：看右下角「Services」面板里显示的 URL，比如
http://localhost:63342/my-project/，那么/images/logo.png就得对应项目根下的images/logo.png - 优先用相对路径：
src="./images/logo.png"（相对于当前 HTML 文件位置），更可控、不易受部署路径影响
如何让WebStorm标出不存在的图片路径
WebStorm 不会默认把缺失图片标为错误，但可以开启「Missing file reference」检查项，让它在 <img src="">、<link href="">、<script src=""></script> 中对无效路径加波浪线。
- 打开
Settings | Editor | Inspections - 搜索
Missing file reference，勾选它，并确保 Scope 是「Project」或「All Scopes」 - 如果只对 HTML 生效，展开该检查项，点击右侧齿轮 →「Only for HTML files」
- 重启索引（
File | Reload project from disk）或等待几秒，已存在的坏路径就会被标黄（警告）
Alt+Enter 修复路径时为什么没反应
不是所有路径错误都支持自动修复——只有当 WebStorm 能从项目结构中唯一匹配到目标文件时，才会提供 Alt+Enter 快速跳转或替换建议。
- 光标必须精准落在引号内的路径字符串上，比如
src="|images/logo.png"（竖线代表光标位置），而不是空格后或引号外 - 如果同名文件在多个目录存在（如
src/images/logo.png和public/images/logo.png），WebStorm 无法确定该选哪个，就不会弹修复菜单 - 路径含变量或模板语法（如
src="{{ asset }}/logo.png"）时，静态检查失效，Alt+Enter不可用 - 确保
Settings | Languages & Frameworks | JavaScript | Libraries中没有禁用「Track missing files」
批量检查整个项目里未被引用的图片
WebStorm 本身不提供「未使用资源」扫描，但可通过外部命令 + IDE 集成快速定位冗余图片。
- 在终端执行：
grep -r "\.png\|\.jpg\|\.jpeg\|\.gif\|\.svg" --include="*.html" --include="*.js" --include="*.ts" --include="*.vue" . | grep -v "node_modules\|dist"，列出所有图片引用 - 再用
find . -type f \( -name "*.png" -o -name "*.jpg" -o -name "*.svg" \) -not -path "./node_modules/*" -not -path "./dist/*" | xargs -I {} sh -c 'echo {}; grep -q "$(basename {})" ./all-references.txt || echo "→ 未被引用"'（需先将上一步结果存为all-references.txt） - 更省事的做法：右键项目根目录 →
Find Usages（快捷键Alt+F7），然后输入图片文件名，看是否有任何引用结果
路径检查真正容易被忽略的点，是开发时混用 file:// 和 http:// 两种加载方式，导致本地测试正常、上线后 404；只要统一走内置服务器，配合 Missing file reference 检查，就能在编码阶段卡住大部分路径问题。
