文章目录
一、开篇必看：图片插入是Markdown的隐藏大招！
各位老铁们（敲黑板），今天咱们要解锁Markdown最容易被低估的神技——图片插入！别看这功能表面简单，实际操作时绝对能让你抓狂到怀疑人生（别问我怎么知道的）！从路径报错到图片变形，从本地存储到云端图床，这里面的坑比马里奥的关卡还多！
二、基础语法：先学会走再学跑
2.1 标准姿势长这样
举个栗子：
显示效果就是：当图片加载失败时显示"程序员日常"，鼠标悬停显示"凌晨三点的键盘侠"
2.2 三大重点（必考！）
- 方括号里的文字是给盲人读屏软件用的（重要程度⭐⭐⭐）
- 圆括号里的地址绝对！不能！有！空格！（血泪教训）
- 本地路径建议用英文命名（中文路径容易出幺蛾子）
三、网络图片：新手村的温柔陷阱
3.1 直接引用超简单
优点：即插即用不用存图
缺点：原图删除就凉凉（重要！）
3.2 推荐图床工具清单
- 免费党：Imgur、SM.MS
- 不差钱：七牛云、阿里云OSS
- 技术流：自建MinIO服务器
（亲测）SM.MS的API调用示例：
curl -i -F "smfile=@本地图片.jpg" https://sm.ms/api/v2/upload
四、本地图片：绝对路径 vs 相对路径
4.1 绝对路径（新手慎用！）
坑点预警：换个电脑直接扑街！
4.2 相对路径（推荐姿势）
项目结构：
├── README.md
└── assets
└── images
└── demo.jpg
正确写法：
（超级重要）VS Code用户请安装「Markdown Preview Enhanced」插件实时预览！
五、图片尺寸调整：Markdown的隐藏技能
5.1 简单粗暴HTML法
<img src="图片地址" width="300" height="200" alt="自适应说明">
优点：精准控制像素
缺点：破坏Markdown的简洁性
5.2 高级CSS玩法（仅部分编辑器支持）
{:style="width:50%; border:2px solid red"}
实测支持：Typora、Obsidian、VSCode+插件
六、图文并茂：给图片加个"身份证"
6.1 组合拳打法
<figure>
<img src="architecture.png" alt="系统架构图">
<figcaption>图1. 微服务架构示意图</figcaption>
</figure>
效果：专业论文既视感瞬间拉满！
七、高阶操作：让图片飞起来
7.1 Base64直接嵌入（适合小图标）
生成工具推荐：https://base64.guru/converter
7.2 流程图混搭（Mermaid语法）
```mermaid
graph LR
A[开始] --> B{判断}
B -->|是| C[执行操作]
B -->|否| D[结束]
```
效果：直接在Markdown里生成矢量流程图，是不是很酷？
八、避坑大全：血泪经验总结
8.1 路径报错三连击
-
错误案例：
正确姿势： -
错误案例：
正确姿势： -
错误案例：中文路径
正确姿势：改用英文路径
8.2 图床防盗链破解
当遇到403 Forbidden时：
原理：通过免费图片代理服务绕过限制
九、终极方案：自动化工作流
9.1 Typora自动上传配置
- 安装PicGo-Core
- 配置图床信息
- 拖拽图片自动上传
（实测）配置代码片段：
{
"picBed": {
"current": "smms",
"smms": {
"token": "你的Token"
}
}
}
十、写在最后
看完这篇指南的你，现在是不是觉得Markdown图片插入突然变得亲切了？（笑）其实重点就三个：
- 路径管理要规范（重要的事情说三遍）
- 尺寸调整用HTML（虽然不优雅但管用）
- 团队协作必用图床（省去传文件的麻烦）
最后送大家一句口诀：本地路径相对走，网络图片图床守，尺寸调整HTML，图文并茂不用愁！
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
