Markdown 图片

1. 前言

以下是来自 Markdown 官方对于图片的定义：

诚然，设计一种纯文本方式的语法来嵌入图片是相当困难的。

Markdown 声明图片的方式很像超链接，同样支持两种定义方式：行内定义和引用方式。
原文出处： daringfireball.net。

图片是比文字更容易表达多方位信息的媒介。Markdown 自然也为图片的添加提供了便捷的方法。

环境说明：
考虑到 Markdown 工具之间的不兼容，有的内容直接从页面复制粘贴到本地不会正常显示，大家学习时自己动手写是肯定没问题的。本节所有实例代码及演示效果均使用 Typora 工具完成。
本节所有渲染后效果截图均为 Typora 导出成 HTML 后的显示效果。

2. 语法详解

2.1 图片的行内定义

在 Markdown 文件中，使用 ![替换文字](图片路径 "标题(可选)") 的形式定义图片

实例 1：

#### 插入一张图片

图片前的文字。

![](https://tva3.sinaimg.cn/crop.0.0.180.180.180/6d04a77djw1e8qgp5bmzyj2050050aa8.jpg?KID=imgbed,tva&Expires=1588529780&ssig=vNCcwnltm2)

图片后的文字

渲染结果如下：

该源码渲染输出 html 的内容如下：

<h4>插入一张图片</h4>
<p>图片前的文字。</p>
<p><img src="https://c-ssl.duitang.com/uploads/item/201905/03/20190503105835_VfkU3.thumb.1000_0.png" referrerpolicy="no-referrer"></p>
<p>图片后的文字。</p>

2.2 图片的全局声明

当一张图片在文章中反复出现时，可以使用全局声明的形式，减少文章编写的工作量。

实例 2：

#### 使用全局声明方式插入图片

![][img1]
![][img2]
![][img1]
![][img2]

[img1]: https://hbfile.huabanimg.com/img/weekly/74/topic/3624245/49465709_sq120 "麦兜兜"
[img2]: https://hbfile.huabanimg.com/img/weekly/74/topic/3624245/49464585_sq120 "新之助"

其渲染结果如下：

全局的声明可以写在文章的任何地方，通常情况下，我们将它写在整篇文章的结尾处。

2.3 图片的样式

Markdown 本身没有为图片增加特殊的样式，如果我们需要特殊定义，可以通过 手动修改全局样式 <style> 实现。

实例 3：

圆形图片。

#### 使图片圆角

![](https://c-ssl.duitang.com/uploads/item/201905/03/20190503105835_VfkU3.thumb.1000_0.png)

<style>
  img {
    border-radius: 50% !important;
    border: 30px solid #eee;
  }
</style>

其渲染结果如下：

3. 使用场景及应用实例

图片是文档中最长出现的媒体文件，是用来表达内容的最好载体之一。一篇文章通常可以增加头部的封面图、尾部的签名图等。

实例 4：

做一个类似图片预览的效果。

#### 拼图九宫格

![][img6]
![][img5]
![][img4]

![][img3]
![][img2]
![][img1]

![][img9]
![][img8]
![][img7]

[img1]: https://c-ssl.duitang.com/uploads/item/202004/10/20200410101433_eTTNZ.thumb.300_300_c.jpeg
[img2]: https://c-ssl.duitang.com/uploads/item/202004/10/20200410101434_iWadw.thumb.300_300_c.jpeg
[img3]: https://c-ssl.duitang.com/uploads/item/202004/10/20200410101434_Z3JVy.thumb.300_300_c.jpeg
[img4]: https://c-ssl.duitang.com/uploads/item/202004/10/20200410101435_NiLkv.thumb.300_300_c.jpeg
[img5]: https://c-ssl.duitang.com/uploads/item/202004/10/20200410101437_CxzYm.thumb.300_300_c.jpeg
[img6]: https://c-ssl.duitang.com/uploads/item/202004/10/20200410101437_wdizF.thumb.300_300_c.jpeg
[img7]: https://c-ssl.duitang.com/uploads/item/202004/10/20200410101438_J8vff.thumb.300_300_c.jpeg
[img8]: https://c-ssl.duitang.com/uploads/item/202004/10/20200410101439_cVcLx.thumb.300_300_c.jpeg
[img9]: https://c-ssl.duitang.com/uploads/item/202004/10/20200410101439_yhUv3.thumb.300_300_c.jpeg

<style>
img {
	width: 150px !important;
	height: 150px !important;
	border: 1px solid #EEE;
}
</style>

渲染结果如下：

4. 小结

1. Markdown 文档只能引用外部图片，无法在像 word 一样将图片嵌入到文档中，给自己找一个习惯的图床是个好方法。
2. Markdown 文档里很难实现图文混排，比如文字环绕图片、图片覆盖文字这类 Word 中的效果，如果需要这样的排版，建议直接选用 Word 。

在选择图床方面，可以考虑 github、gitee 等平台，方便图片的保存和引用，也使得 Markdown 文档的传播更方便。