文章目录
一、基础篇：3种插入方式任你选
方法一：基础语法（必学！）
举个栗子：
（注意！！！路径写错是新手最常见的错误）
方法二：HTML标签（灵活扩展）
当需要更复杂的控制时：
<img src="logo.png" alt="公司标志" width="200" style="border:2px solid red">
（适合需要精确控制尺寸/边框的场景）
方法三：引用式写法（长文档必备）
先定义图片变量：
[wechat]: ./images/wechat.png "扫码加好友"
使用时直接调用：
![微信二维码][wechat]
（文档整洁度瞬间提升200%）
二、避坑专区：新手必看5大雷区
雷区1：路径问题（血泪教训！）
- 相对路径：
../images/photo.jpg（注意文件层级） - 绝对路径：
C:\Users\Desktop\pic.jpg（本地可用，但分享会失效） - 网络地址：
https://example.com/image.jpg（最推荐的方式）
雷区2：特殊字符处理
文件名含空格要加引号：
![截图]("my photo.jpg")
（不处理的话路径会断裂成两截）
雷区3：图床选择
推荐免费图床：
- SM.MS（国内访问快）
- Imgur（国际通用）
- GitHub仓库（技术向首选）
雷区4：格式兼容性
PNG > JPG > GIF（不同渲染器支持度不同）
（PDF转换时WEBP格式可能出问题）
雷区5：移动端适配
手机查看时：
- 避免图片宽度超过600px
- 优先使用自适应布局语法：
<img src="banner.jpg" style="max-width:100%">
三、高级技巧：让图片会说话
技巧1：图文混排
用HTML实现文字环绕：
<img src="chart.png" align="right" width="300">
这里是说明文字，会自动环绕在图片右侧...
技巧2：响应式图片
根据屏幕尺寸切换图片：
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="自适应图片">
</picture>
技巧3：图片标注
用ASCII字符做标记：
▲ 这里是最核心模块
▼ 数据流向示意
技巧4：动态更新
GitHub图片自动同步：
（每次访问都会拉取最新图片）
四、实战案例：从零搭建图床
方案A：GitHub+jsDelivr（免费高速）
- 创建GitHub仓库
my-images - 上传图片到
/images目录 - 生成直链：
https://cdn.jsdelivr.net/gh/你的账号/my-images/images/photo.jpg
方案B：阿里云OSS（专业稳定）
（可附加图片处理参数）
五、冷知识：你可能不知道的彩蛋
-
某些编辑器支持拖拽插入：
直接把图片拖进编辑器自动生成代码（VSCode亲测有效） -
加密图片传输：
（需要配合后端解密） -
图片懒加载：
{:data-src="large.jpg"}
（需配合JavaScript实现）
最后的小贴士（超级重要）
-
团队协作时：
- 统一使用相对路径
- 建立
/assets/images目录规范 - 禁止中文文件名！
-
文档发布前：
- 用Markdown Link Check检查死链
- 压缩图片到200KB以下
- 添加
alt文字提升可访问性
-
终极解决方案：
把Markdown转成HTML时：pandoc doc.md -o output.html --self-contained（自动打包所有本地图片到单个文件）
现在就去试试这些技巧吧！遇到问题欢迎在评论区交流～（记得附上你的代码片段和报错信息）
扫一扫
1827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
