图片不显示主因是路径错误：浏览器解析src以HTML文件位置为基准，本地双击时/指向系统根目录，应统一用./开头相对路径并启用HTTP服务调试。
图片不显示，八成是路径写错了——不是代码语法问题，而是浏览器根本没找到那个文件。
用浏览器 Network 面板确认 404 请求
这是最直接的判断依据。右键页面空白处 → “检查” → 切到 Network 标签 → 刷新页面 → 在筛选栏输入 img 或直接找 .jpg/.png 类型请求。如果某张图的状态码是 404，说明浏览器发出了请求，但服务器（或本地文件系统）返回“找不到”。此时点击该请求，看 Headers 里的 Request URL，它就是浏览器实际尝试访问的地址，和你写的 src 值可能不一致。
- 常见现象：写的是
src="images/logo.png"，但Request URL显示为http://localhost/images/logo.png—— 说明 HTML 文件不在网站根目录，而你用了以/开头的绝对路径 - 另一个典型：写的是
src="logo.png"，但Request URL是file:///C:/logo.png—— 这说明你双击打开了 HTML 文件，file://协议下相对路径解析异常，浏览器误把当前目录当成磁盘根
统一用 ./ 开头的相对路径
哪怕图片和 HTML 在同一文件夹，也别只写 src="photo.jpg"，强制加上 ./：src="./photo.jpg"。这不是多此一举，而是规避不同环境路径解析差异的最小成本方案。
-
./明确告诉浏览器：“从当前 HTML 文件所在目录开始找”，不依赖任何隐式规则 - 在 VS Code 等编辑器里拖拽图片生成的路径常带
file:///前缀，必须手动删掉，只保留./xxx.jpg - 子目录引用统一用
./images/icon.svg，上级目录用../assets/logo.png，避免混用images/和./images/导致维护混乱
本地开发必须起 HTTP 服务，别双击打开 HTML
直接双击 HTML 文件走的是 file:// 协议，此时 / 指向 C:\ 或 /Users/，./ 也可能被某些浏览器忽略或误解析。所有路径行为都不可靠。
立即学习“前端免费学习笔记（深入）”；
- Python 用户执行：
python -m http.server 8000，然后访问http://localhost:8000/index.html - Node.js 用户可装
serve：npx serve -s，自动起服务并打开浏览器 - VS Code 安装 Live Server 插件，右键 HTML 文件点 “Open with Live Server” —— 它会自动处理端口、缓存和路径基准
检查 src 值是否为空或含非法字符
有时候图片不显示，根本不是路径问题，而是 src 属性本身出错。比如模板变量未渲染成功，导致最终 HTML 中出现 src="" 或 src="{{imagePath}}" 这种原始字符串。
- 在开发者工具的
Elements面板中，直接查看渲染后的<img>标签，确认src属性值是否为真实路径 - 注意空格：写成
src=" ./photo.jpg"（开头有空格）会导致路径失效，浏览器不会自动 trim - 大小写敏感：Linux 服务器或 Git 仓库里，
Photo.JPG和photo.jpg是两个文件，本地 Windows 可能不报错，部署后立刻 404
真正卡住人的往往不是技术多难，而是路径在本地能跑、一部署就挂，或者换台电脑就失效——这些问题几乎全出在 file:// 协议滥用、./ 缺失、以及没用 Network 面板验证实际请求路径上。
