图片不显示90%是src路径错误；相对路径以index.html所在目录为基准，/开头路径仅在web服务器下有效，本地双击会404；禁用反斜杠、注意大小写、避免空格及拼写错误。
图片不显示，90% 是 src 路径写错了，不是代码漏标签、不是图片损坏、更不是浏览器问题。路径一错，404 静静发生，控制台可能连报错都不出。
相对路径怎么写才真正生效
相对路径的基准永远是当前 index.html 文件所在目录，不是你 VS Code 里打开的文件夹，也不是你双击时 Windows 资源管理器的“当前路径”。写错就 404，没商量。
-
src="logo.png"：图片和 HTML 在同一级，最安全 -
src="images/icon.jpg"：图片在同级的images子目录下（别写./images/，./可省） -
src="../assets/photo.svg"：图片在上一级目录的assets文件夹里（..表示上级，不能写成.././或..\） - Windows 下禁用反斜杠：
src="images\cat.jpg"是无效的，浏览器只认/ - 路径区分大小写：
Logo.png≠logo.png，Linux 服务器上线后必翻车
/ 开头的路径为什么本地双击总 404
src="/images/a.png" 这类以 / 开头的路径，在 file:// 协议下（即双击打开 HTML）会指向你电脑磁盘根目录，比如 file:///C:/images/a.png，而不是你的项目根目录。
- 双击打开 → 地址栏是
file:///D:/my-site/index.html→src="/images/a.png"就去找file:///images/a.png，直接404 - 用
python3 -m http.server或 VS Code Live Server 启动 → 地址变成http://localhost:8000/index.html→ 此时/images/a.png才真正指向项目根下的images目录 - 结论：
/xxx类路径只在 Web 服务器环境下有意义，本地开发阶段一律避免
常见 src 错误现象与排查线索
这些错误不会触发语法报错，但图片就是不出现，控制台可能安静得诡异 —— 得靠 Network 面板或地址栏拼接验证。
-
src=""或src=" "：触发一次空请求，Chrome 控制台显示GET file://// 404 -
src="icon"（漏了.png）：浏览器不会自动补扩展名，直接404 -
src="imags/logo.png"（images拼错）：路径不存在，Network 面板明确显示404 -
src值为空格、中文全角字符、不可见 Unicode 字符：肉眼难辨，复制粘贴时极易混入
最容易被忽略的是：不同启动方式下路径解析逻辑完全不同。你以为写对了，其实只是恰好在 Live Server 下“碰巧能跑”，一换环境就崩。别信感觉，信浏览器地址栏拼出来的完整 URL。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
