1. 程式人生 > >markdown插入圖片

markdown插入圖片

正文

在CSDN Markdown編輯器中插入圖片有兩種方式:

  • 使用工具欄上的圖片上傳功能

  • 自己動手寫圖片連結的方式

下面分別介紹它們的使用方法。

圖片上傳方式

這種方式最簡單,屬圖形化方式。大家可以很容易的在CSDN Markdown編輯器的工具欄那裡找到圖片上傳的圖示:圖片上傳圖示

或者直接使用快捷鍵Ctrl + G,會彈出一個圖片上傳的對話方塊,可以看出既可以插入網上的線上圖片也可以上傳本地圖片插入。

插入線上圖片

圖片上傳圖示

上面已經給出圖片的書寫格式:

線上圖片地址 + 若干個空格 + 可選的用雙引號括起來的圖片提示 

插入本地圖片

對話方塊中切換到“上傳圖片”的標籤後如下:

圖片上傳對話方塊

使用方式更簡單:

選擇本地圖片 — 上傳 — 下面方框裡顯示圖片預覽 — 最後確認插入

如果插入的是線上圖片,即只有圖片URL,那麼除了上面用圖形化方式操作之外,還可以使用圖片連結的方式。

Markdown使用一種和「普通文字連結」很相似的語法來標記圖片,同樣也允許兩種樣式: 行內式參考式

行內式圖片連結

行內式的圖片連結語法如下:

![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title")

詳細敘述各個組成部分:

  • 一個驚歎號 !
  • 接著一個方括號,裡面放上圖片的替代文字,也就是當圖片還未載入成功時顯示的替換文字
  • 接著一個普通括號,裡面放上圖片的網址,以及可選的用雙引號(或單引號或括弧)包住的’title’文字,兩者之間用若干個空格分割開來,如果加上了’title’文字,那麼滑鼠移到該圖片上就會顯示出該文字

一個例項:

下面我在網上找了個線上圖片,複製它的URL按上面的語法格式寫即可成功插入圖片。

![CSDN圖示](http://imgtech.gmw.cn/attachement/jpg/site2/20111223/f04da22d7ba7105e1d7507.jpg "這是CSDN的圖示")

效果為:

CSDN圖示

參考式圖片連結

參考式的圖片連結語法則如下面這樣:

![Alt text][id]

[id]: url/to/image  "Optional title"

其中「id」是圖片參考的標籤,圖片參考的定義方式和連結參考一樣,可以放在文件的任何位置。

詳細敘述各個組成部分:

  • 一個驚歎號 !
  • 接著一個方括號,裡面放上圖片的替代文字,也就是當圖片還未載入成功時顯示的替換文字
  • 接著另一個方括號,裡面是圖片參考的標籤id,id可以是數字、英文字元,也可以是中文
  • 最後在文件的任何位置處寫上標籤id的內容定義,內容定義的形式為: 
    • 一個方括號(前面可以選擇性地加上至多三個空格來縮排),裡面輸入所要定義的標籤id
    • 接著一個冒號
    • 接著一個以上的空格或製表符
    • 接著圖片的網址
    • 最後選擇性地接著title內容,可以用單引號、雙引號或是括弧包著,與上面一樣

例子:

還是以上面那個圖片URL為例,改寫成參考式連結如下:

![CSDN圖示][csdn]

[csdn]: http://imgtech.gmw.cn/attachement/jpg/site2/20111223/f04da22d7ba7105e1d7507.jpg "這是CSDN的圖示"

效果:

CSDN圖示

幾個問題探討

下面針對Markdown插入圖片的方式提出幾個大家可能會問的問題,並根據自己的經驗進行探討解答。

問題1:圖片上傳和圖片連結兩種方式的區別

不管是利用圖片上傳的方式還是圖片連結的方式插入圖片,最終形成的都是Markdown內部的圖片連結語法,因此兩種方式在本質上是一樣的。

比如我上傳一張本地圖片,成功插入後Markdown對應內容如下:

![這裡寫圖片描述](https://img-blog.csdn.net/20150316184625949)

可以看出在我們上傳本地圖片成功後,CSDN-markdown編輯器會將伺服器上該圖片的地址取出來,然後用Markdown圖片連結的語法插入圖片。因此我們在上傳圖片後,還可以在對應的Markdown內容上進行修改,加上圖片描述和圖片的title。

問題2:Markdown中如何指定圖片的高和寬?

到目前為止, Markdown還沒有辦法指定圖片的寬高,如果需要的話,你可以使用普通的 <img>標籤,利用它的widthheight屬性來定製寬高。

還是以上面那個圖片URL為例,如果我們希望把它的大小改為300*120,則可以這麼做:

<img src="http://imgtech.gmw.cn/attachement/jpg/site2/20111223/f04da22d7ba7105e1d7507.jpg" width = "300" height = "120" alt="CSDN圖示" />

效果:

CSDN圖示

問題3:Markdown中如何指定圖片的對齊方式?

大家可能也注意到了,CSDN-markdown編輯器顯示的圖片預設都是左對齊,那能不能將其改為居中對齊或右對齊呢?

答案是Markdown做不到,但跟「2」一樣,我們可以藉助html語法來實現,html中讓一個元素居中的方式也有很多,下面給出兩種方式供參考。

方法一(推薦):

如果只是居中對齊,則可以使用html中的<center>...</center>標籤,包圍在Markdown圖片連結內容的外面即可,如下:

<center>
![CSDN圖示](http://imgtech.gmw.cn/attachement/jpg/site2/20111223/f04da22d7ba7105e1d7507.jpg "這是CSDN的圖示")
</center>

效果


CSDN圖示 

當然,上面也說了,該方法只能用於居中對齊,不能進行右對齊。

方法二:

使用html中的div標籤,它有個對齊屬性align,可以指定為leftcenterright以實現左對齊、居中對齊和右對齊。不過經我實驗,這種方式div標籤之間不能放Markdown圖片連結語法,而只能是html的語法格式,因此還要配合<img>標籤使用。

下面是居中對齊的寫法示例:

<div align="center">
<img src="http://imgtech.gmw.cn/attachement/jpg/site2/20111223/f04da22d7ba7105e1d7507.jpg"  alt="CSDN圖示" />
 </div>

效果:

CSDN圖示

注意: 這裡如果大家仔細看的話可以發現上面閉合標籤</div>縮進了一個空格,因為經我嘗試,這裡如果不縮排一個空格就達不到想要的效果,會造成某些Markdown語法失效。