插入图片
图片的写法和链接几乎一模一样，只是最前面多了一个感叹号。但真正让图片语法区别于链接的，是方括号里的替代文本（alt text）。它平时看不见，却在图片加载失败、被读屏软件朗读、或者读者把图片地址复制到别处时，替图片说话。这一页讲清替代文本该怎么写、路径该怎么给，以及为什么图片和链接虽然像，权衡却相反。
感叹号加方括号加圆括号，就是一张图片：
<p><img src="https://example.com/demo.png" alt="示例图片" title="可选标题"></p>和行内式链接一一对应：方括号里是替代文本，圆括号里是图片地址，地址后面同样可以跟一段用引号包起来的标题（悬停时显示）。
图片也能用引用式写法，! 加在方括号前面就行：
![示例图片][demo]
[demo]: https://example.com/demo.png替代文本有两个作用：图片加载不出来时，浏览器把它显示在图片位置；读屏软件朗读时，它就是图片的全部内容。所以它不是装饰，而是图片在无图环境下的替身。
有两个要点。第一，描述内容而不是描述图片。一张架构图的替代文本应该是「订单、支付与库存三个服务的调用关系」，而不是「图片」或文件名——后者对读屏用户没有信息量。
第二，替代文本里不能写格式。方括号里的内容是纯文本，标记符号会被剥掉，只留下文字本身：
<p><img src="https://example.com/a.png" alt="粗体 和 代码"></p>想强调也做不到——alt 属性接受的就是一段字符串，没有富文本概念。
什么时候该留空
纯装饰性的图片（分隔线、背景纹理、图标条）确实可以用空替代文本：
但空替代文本会让读屏用户跳过这张图。如果希望它被朗读，写上简短说明；如果它真的没有信息量，留空比写「图片」好。
图片地址的规则和链接地址一致：同仓库内用相对路径，跨站用完整地址。相对路径相对于当前文件所在目录解析，所以放在 public/images/ 下的图片，在 docs/guide/ 目录的文档里要写成 ../../images/xxx.png——前提是站点按文件结构映射 URL。
别用外链图片地址写示例。 文档里的图片一旦依赖第三方服务器，对方改地址、加防盗链或者下线，你的文档就出现一堆破图。更稳妥的做法是把图片放进仓库，让图片地址和文档的生命周期一致。
| 写法 | 实际渲染 | 原因 |
|---|---|---|
 | 图片 | 基本写法 |
 | 图片，替代文本为空 | 空替代文本合法 |
 | 替代文本为「粗体」 | alt 只接受纯文本 |
 | 路径编码成 %20 | 尖括号包裹含空格的路径 |
 漏了感叹号 | 变成链接 | 少了 ! 就是普通链接 |
把下面这段内容改写成 Markdown，要求：插图用带替代文本的围栏式写法，路径是仓库内的相对路径 ../../images/flow.png；同时给这张图配一个引用式链接，让它点击后能跳到 https://example.com/docs/flow；替代文本要描述图的内容而不是写「图片」。
下面这张图展示了订单从下单到发货的完整流程：解题思路： 图片的基本写法是「感叹号 + 方括号里的替代文本 + 圆括号里的路径」，和链接只差最前面的感叹号。想让图片可点击，就把它包在链接语法里——链接在前，图片在后。替代文本要描述内容，路径用仓库内的相对地址。
详细步骤：
- 替代文本写成描述性的一句话：「订单从下单到发货的完整流程」，而不是「图片」或文件名——它是图片加载失败时读者唯一能看到的内容。
- 图片写法为
。感叹号不能漏，漏了就退化成普通链接。 - 让图片可点击，就在外层再套一层链接：
[](https://example.com/docs/flow)。方括号里是图片，圆括号里是跳转地址。 - 相对路径
../../images/flow.png相对于当前文档所在目录，逐级上溯两级再进images，不用写域名。 - 检验：渲染后是一个包着图片的链接，点击跳到
https://example.com/docs/flow，图片加载失败时显示那句描述文字。
最终答案：
[](https://example.com/docs/flow)读完这一页，你应当能写出带替代文本的图片，能把图片包进链接里做成可点击的示意图，能解释替代文本为什么只接受纯文本、为什么不能只写「图片」，也能在图片路径带空格时用尖括号包裹。接下来放图时，你会先想好这张图在「看不见图」的场景里该说什么，再去挑路径。