Markdown 圖片

1. 前言

以下是來自 Markdown 官方對(duì)于圖片的定義：

誠然，設(shè)計(jì)一種純文本方式的語法來嵌入圖片是相當(dāng)困難的。

Markdown 聲明圖片的方式很像超鏈接，同樣支持兩種定義方式：行內(nèi)定義和引用方式。
原文出處： daringfireball.net。

圖片是比文字更容易表達(dá)多方位信息的媒介。Markdown 自然也為圖片的添加提供了便捷的方法。

環(huán)境說明：
考慮到 Markdown 工具之間的不兼容，有的內(nèi)容直接從頁面復(fù)制粘貼到本地不會(huì)正常顯示，大家學(xué)習(xí)時(shí)自己動(dòng)手寫是肯定沒問題的。本節(jié)所有實(shí)例代碼及演示效果均使用 Typora 工具完成。
本節(jié)所有渲染后效果截圖均為 Typora 導(dǎo)出成 HTML 后的顯示效果。

2. 語法詳解

2.1 圖片的行內(nèi)定義

在 Markdown 文件中，使用 ![替換文字](圖片路徑 "標(biāo)題(可選)") 的形式定義圖片

實(shí)例 1：

#### 插入一張圖片

圖片前的文字。

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

圖片后的文字

渲染結(jié)果如下：

該源碼渲染輸出 html 的內(nèi)容如下：

<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 圖片的全局聲明

當(dāng)一張圖片在文章中反復(fù)出現(xiàn)時(shí)，可以使用全局聲明的形式，減少文章編寫的工作量。

實(shí)例 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 "新之助"

其渲染結(jié)果如下：

全局的聲明可以寫在文章的任何地方，通常情況下，我們將它寫在整篇文章的結(jié)尾處。

2.3 圖片的樣式

Markdown 本身沒有為圖片增加特殊的樣式，如果我們需要特殊定義，可以通過 手動(dòng)修改全局樣式 <style> 實(shí)現(xiàn)。

實(shí)例 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>

其渲染結(jié)果如下：

3. 使用場(chǎng)景及應(yīng)用實(shí)例

圖片是文檔中最長出現(xiàn)的媒體文件，是用來表達(dá)內(nèi)容的最好載體之一。一篇文章通?？梢栽黾宇^部的封面圖、尾部的簽名圖等。

實(shí)例 4：

做一個(gè)類似圖片預(yù)覽的效果。

#### 拼圖九宮格

![][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>

渲染結(jié)果如下：

4. 小結(jié)

1. Markdown 文檔只能引用外部圖片，無法在像 word 一樣將圖片嵌入到文檔中，給自己找一個(gè)習(xí)慣的圖床是個(gè)好方法。
2. Markdown 文檔里很難實(shí)現(xiàn)圖文混排，比如文字環(huán)繞圖片、圖片覆蓋文字這類 Word 中的效果，如果需要這樣的排版，建議直接選用 Word 。

在選擇圖床方面，可以考慮 github、gitee 等平臺(tái)，方便圖片的保存和引用，也使得 Markdown 文檔的傳播更方便。