Markdown 图片
🖼️ 基础语法格式
 核心要素解析
| 部分 | 作用说明 |
|---|---|
! | 标识图片元素（区别于普通链接） |
[替代文字] | 关键：图片加载失败时显示文字；屏幕阅读器朗读内容；SEO优化基础 |
(图片路径) | 本地路径/网络URL（支持相对/绝对路径） |
"标题" | 鼠标悬停时显示的提示文本（增强用户体验，非必填） |
📂 路径类型详解
🔹 相对路径（推荐）
 # 当前目录的子目录  # 上级目录  # 无前缀相对路径✅优势：
- 项目整体迁移时链接自动保持有效
- 适合Git仓库、文档站点等需要协作的场景
🔧目录结构建议：
project/ ├── docs/ │ ├── images/ # 文档专用图片 │ └── guide.md ├── assets/ # 项目通用资源 └── README.md🔹 绝对路径（谨慎使用）
 # macOS/Linux  # Windows⚠️缺陷：
- 仅在本机有效，共享文档时他人无法查看
- 不同操作系统路径格式冲突（反斜杠
\需转义为\\）
🚫使用场景：仅限个人本地笔记，绝不用于团队协作文档
🔹 网络图片（跨平台首选）
 ✅最佳实践：
- 优先使用HTTPS链接（避免混合内容警告）
- 选择稳定可靠的图床（推荐：官方文档用资产库/CDN，个人笔记用GitHub图床）
- 重要图片建议本地备份（网络资源可能失效）
🔗 引用式图片（高级技巧）
语法规范
![系统架构图][arch] 与 ![数据流程][data] 协同工作 [arch]: https://example.com/arch.png "系统架构" [data]: ./images/data-flow.jpg "数据处理流程"核心价值
| 场景 | 优势说明 |
|---|---|
| 重复使用同一图片 | 修改一处，全文档生效 |
| 长URL整洁化 | 正文保持简洁，链接集中管理 |
| 多平台兼容性优化 | 快速替换失效链接（只需改定义处） |
专业排版建议
<!-- 文档底部集中管理 --> [logo]: ./assets/logo.svg "企业标识" [diagram]: https://cdn.example.com/v3/diagram.png "最新架构图（2024版）" [screenshot]: /path/to/local.png "仅内部使用"⚙️ 扩展技巧与避坑指南
🌐 跨平台路径规范
| 平台 | 推荐路径写法 | 避免写法 |
|---|---|---|
| GitHub | ./images/photo.jpg | C:\images\photo.jpg |
| Obsidian | assets/photo.png（无前缀相对路径） | 绝对路径 |
| 本地预览 | images/photo.jpg | 含空格路径 |
⚠️ 高频陷阱
空格陷阱
❌→ 路径含空格时必须转义：
✅或 ✅中文路径问题
部分旧系统不支持 → 建议文件名使用英文+数字（user_guide.jpg优于用户指南.jpg）图片大小控制（非标准但常用）
<!-- GitHub支持HTML扩展 --> <img src="diagram.png" width="300" alt="架构图">
🔒 安全与性能
- 隐私警告：避免在公开文档使用内网/本地路径图片（可能泄露系统信息）
- 加载优化：网络图片建议压缩至100KB内（工具推荐：TinyPNG）
- 版权提示：商业文档务必确认图片授权（推荐资源：Unsplash、Pixabay）
💎黄金法则：
“所有图片必须有替代文字，所有网络图片必须用HTTPS”
—— 这既是无障碍要求，也是专业文档的底线 ✨