CSDN-markdown语法之怎样插入图片

文件夹

• 图片上传方式
  
  • 插入在线图片
  • 插入本地图片
• 图片链接方式
  
  • 行内式图片链接
  • 參考式图片链接
• 几个问题探讨
  
  • 问题1：图片上传和图片链接两种方式的差别
  • 问题2：Markdown中怎样指定图片的高和宽？
  • 问题3：Markdown中怎样指定图片的对齐方式？

正文

在CSDN Markdown编辑器中插入图片有两种方式：

• 使用工具栏上的图片上传功能

• 自己动手写图片链接的方式

以下分别介绍它们的用法。

图片上传方式

这样的方式最简单，属图形化方式。大家能够非常easy的在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的图标")

效果为：

參考式图片链接

參考式的图片链接语法则如以下这样：

![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的图标"

效果：

几个问题探讨

以下针对Markdown插入图片的方式提出几个大家可能会问的问题，并依据自己的经验进行探讨解答。

问题1：图片上传和图片链接两种方式的差别

无论是利用图片上传的方式还是图片链接的方式插入图片，终于形成的都是Markdown内部的图片链接语法，因此两种方式在本质上是一样的。

比方我上传一张本地图片，成功插入后Markdown相应内容例如以下：

![这里写图片描写叙述](//img-blog.csdn.net/20150316184625949)

能够看出在我们上传本地图片成功后，CSDN-markdown编辑器会将server上该图片的地址取出来，然后用Markdown图片链接的语法插入图片。因此我们在上传图片后，还能够在相应的Markdown内容上进行改动。加上图片描写叙述和图片的title。

问题2：Markdown中怎样指定图片的高和宽？

到眼下为止， Markdown还没有办法指定图片的宽高，假设须要的话，你能够使用普通的 <img> 标签，利用它的width和height属性来定制宽高。

还是以上面那个图片URL为例，假设我们希望把它的大小改为300*120，则能够这么做：

<img src="http://imgtech.gmw.cn/attachement/jpg/site2/20111223/f04da22d7ba7105e1d7507.jpg" width = "300" height = "120" alt="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>

效果：

当然，上面也说了。该方法仅仅能用于居中对齐，不能进行右对齐。

方法二：

使用html中的div标签，它有个对齐属性align，能够指定为left、center和right以实现左对齐、居中对齐和右对齐。只是经我实验，这样的方式div标签之间不能放Markdown图片链接语法，而仅仅能是html的语法格式。因此还要配合<img>标签使用。

以下是居中对齐的写法演示样例：

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

效果：

注意： 这里假设大家细致看的话能够发现上面闭合标签</div>缩进了一个空格，由于经我尝试，这里假设不缩进一个空格就达不到想要的效果，会造成某些Markdown语法失效。