图片不显示八成是src路径错误：基准为html文件位置，须用相对路径（如"images/a.png"）或http协议访问，禁用file://双击打开、本地绝对路径及反斜杠。
图片不显示，八成是 src 值写错了路径——不是文件不存在，而是浏览器根本没找对地方。别急着检查图片格式或网络，先确认你用的是哪种路径、基准点在哪、有没有被浏览器拦住。
为什么 src="C:\Users\...\photo.jpg" 一定失败
这是本地文件系统路径，不是 Web 路径。现代浏览器禁止 file:// 协议下加载跨目录的绝对磁盘路径，属于安全硬限制，跟设置无关。
- 双击打开 HTML 文件时地址栏显示
file:///D:/...，此时所有src都受限 -
C:\、D:\、反斜杠\全部无效，哪怕图片真在那个位置 - 即使改成正斜杠
D:/images/photo.jpg，依然被拒绝——协议层面不认
img 的 src 路径必须以 HTML 文件为起点计算
相对路径的“相对”，指的是相对于当前 .html 文件所在位置，不是相对于桌面、项目根目录或 CSS 文件。
- 同级：图片和 HTML 都在
my-site/下 →<img src="logo.png"> - 子目录：
my-site/images/cat.jpg→<img src="images/cat.jpg"> - 父目录：
my-site/index.html要引用my-site/../assets/dog.jpg→<img src="../assets/dog.jpg"> - 大小写敏感：Linux/macOS 服务器上
IMG.JPG≠img.jpg，Windows 本地开发可能侥幸通过，但上线必挂
用 http://localhost 替代双击打开，否则相对路径形同虚设
只有走 HTTP 协议，浏览器才真正支持解析相对路径。双击打开等于自废武功。
- VS Code 用户装 Live Server 插件，右键 → “Open with Live Server”（默认端口
5500） - 命令行用户有 Python 就够：
python -m http.server 8000，然后访问http://localhost:8000 - 别用
file://测试，哪怕它“看起来能显示一两张”——那是缓存或巧合，不可靠
远程图、内联图、响应式图：不同场景用不同机制
不是所有图都该塞进 src。根据用途选对方式，避免后期维护踩坑。
- 外部图必须带协议：
<img src="https://example.com/img.png?x-oss-process=image/resize,p_40">，HTTP 会被现代浏览器拦截 - 小图标可转 data URI：
<img src="data:image/svg+xml;base64,PHN2Zy4uLg==">，免请求但体积膨胀 - 需要适配屏幕尺寸？别只靠
width/height，改用<picture></picture>+<source media="(max-width:768px)" srcset="small.jpg"></source> - CSS 背景图路径基准是 CSS 文件位置，不是 HTML ——这点常被混淆，
background-image: url("logo.png")在css/style.css里，找的是css/logo.png，不是./logo.png
最易被忽略的一点：路径问题从来不是孤立的。当你改了 HTML 文件位置（比如从 /index.html 移到 /pages/home.html），所有相对 src 都得重算；而用根目录路径（/images/logo.png）虽稳定，却要求你始终部署在 Web 服务器根目录下——本地测试时若没起服务，照样 404。路径管理的本质，是把资源定位逻辑和部署结构对齐，而不是拼对一串字符就完事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
