图片不显示主因是src路径错误：浏览器解析以html文件位置为基准，双击打开时/指向系统根目录，应统一用./开头相对路径并启用http服务调试。
图片不显示，八成是 src 路径写错了
不是文件没放对，而是浏览器压根没找对地方。路径参照点、斜杠方向、大小写、甚至你是双击打开还是用服务器访问，都会让 <img> 失效。
最稳妥的起点：所有同级图片统一加 ./ 前缀，比如 <img src="./logo.png">。它比直接写 logo.png 更可靠，尤其在本地调试时能强制锚定当前目录。
-
images/logo.png表示子目录，合法；./images/logo.png也合法但冗余 -
../assets/icon.svg表示上一级目录里的assets文件夹，注意..后必须跟/，..assets/icon.svg是错的 - 路径中所有斜杠必须是正斜杠
/—— Windows 资源管理器显示\，但 HTML 里一律不用
为什么双击打开 HTML，图片经常空白
直接双击 HTML 文件，浏览器走的是 file:// 协议，此时路径解析行为和真实 HTTP 环境不一致。比如省略 ./，某些浏览器会忽略或误解析。
错误现象：<img src="photo.jpg"> 在 VS Code 的 Live Server 下正常，双击打开却空白。
- 根本原因：部分浏览器对
file://下的相对路径宽松度不同，./能强制锚定当前目录 - 真实调试建议：用轻量服务器启动，比如 VS Code 的 Live Server、Python 的
python -m http.server，别依赖双击行为 -
file:///C:/project/images/photo.jpg理论可行，但换台电脑就失效，开发阶段不推荐
/ 开头的“绝对路径”为什么总 404
这种写法（如 src="/images/logo.png"）不是指向你电脑的 C 盘，而是让浏览器自动拼成 https://example.com/images/logo.png（协议和域名继承自当前页面）。它依赖服务器配置。
- 必须确保 Web 服务器（Nginx/Apache）把
/images/这个 URL 路径真实映射到磁盘上对应静态文件目录，否则必 404 - 开发时双击打开（
file:///协议），/images/logo.png会被解析为file:///images/logo.png，几乎肯定失败 - Vite/Webpack 构建后，若配置了
base: "/my-app/"，所有/xxx会被重写成/my-app/xxx，得检查构建输出的 HTML 源码确认是否符合部署结构
文件名大小写和空格，上线后才暴露问题
本地开发用 Windows 可能不报错，但一部署到 Linux 服务器（Nginx/Apache），Photo.jpg 和 photo.jpg 就是两个文件。
- 错误示例：
<img src="./IMG_2023.jpg">，但实际文件是img_2023.jpg→ 浏览器返回 404 - 检查方法：打开浏览器开发者工具，切到 Network 标签页，看请求 URL 和响应状态码；404 表示路径/文件名错，403 表示权限或服务器配置拦截
- 预防做法：统一小写命名 + 连字符分隔，如
user-avatar.png，避免空格和中文
路径本身没有高深逻辑，但每个细节都卡在「浏览器怎么解析」和「服务器怎么响应」之间。最容易被忽略的，其实是开发环境和生产环境的协议差异——file:// 下能跑通的路径，放到 http:// 或 https:// 下大概率挂掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
