优快云-markdown语法之如何插入图片

本文详细介绍了在优快云 Markdown编辑器中插入图片的方法,包括上传本地图片、插入在线图片、行内式和参考式图片链接。同时讨论了图片的宽高设置、对齐方式以及上传和链接方式的区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

正文

在优快云 Markdown编辑器中插入图片有两种方式:

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

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

下面分别介绍它们的使用方法。

图片上传方式

这种方式最简单,属图形化方式。大家可以很容易的在优快云 Markdown编辑器的工具栏那里找到图片上传的图标:图片上传图标

或者直接使用快捷键Ctrl + G,会弹出一个图片上传的对话框,可以看出既可以插入网上的在线图片也可以上传本地图片插入。

插入在线图片

图片上传图标

上面已经给出图片的书写格式:

在线图片地址 + 若干个空格 + 可选的用双引号括起来的图片提示 

插入本地图片

对话框中切换到“上传图片”的标签后如下:

图片上传对话框

使用方式更简单:

选择本地图片 — 上传 — 下面方框里显示图片预览 — 最后确认插入

如果插入的是在线图片,即只有图片URL,那么除了上面用图形化方式操作之外,还可以使用图片链接的方式。

Markdown使用一种和「普通文本链接」很相似的语法来标记图片,同样也允许两种样式: 行内式参考式

行内式图片链接

行内式的图片链接语法如下:

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

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

详细叙述各个组成部分:

  • 一个惊叹号 !
  • 接着一个方括号,里面放上图片的替代文字,也就是当图片还未加载成功时显示的替换文本
  • 接着一个普通括号,里面放上图片的网址,以及可选的用双引号(或单引号或括弧)包住的’title’文字,两者之间用若干个空格分割开来,如果加上了’title’文字,那么鼠标移到该图片上就会显示出该文字

一个实例:

下面我在网上找了个在线图片,复制它的URL按上面的语法格式写即可成功插入图片。

![优快云图标](http://imgtech.gmw.cn/attachement/jpg/site2/20111223/f04da22d7ba7105e1d7507.jpg "这是优快云的图标")

效果为:

优快云图标

参考式图片链接

参考式的图片链接语法则如下面这样:

![Alt text][id]

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

其中「id」是图片参考的标签,图片参考的定义方式和链接参考一样,可以放在文档的任何位置。

详细叙述各个组成部分:

  • 一个惊叹号 !
  • 接着一个方括号,里面放上图片的替代文字,也就是当图片还未加载成功时显示的替换文本
  • 接着另一个方括号,里面是图片参考的标签id,id可以是数字、英文字符,也可以是中文
  • 最后在文档的任何位置处写上标签id的内容定义,内容定义的形式为:
    • 一个方括号(前面可以选择性地加上至多三个空格来缩进),里面输入所要定义的标签id
    • 接着一个冒号
    • 接着一个以上的空格或制表符
    • 接着图片的网址
    • 最后选择性地接着title内容,可以用单引号、双引号或是括弧包着,与上面一样

例子:

还是以上面那个图片URL为例,改写成参考式链接如下:

![优快云图标][csdn]

[csdn]: http://imgtech.gmw.cn/attachement/jpg/site2/20111223/f04da22d7ba7105e1d7507.jpg "这是优快云的图标"

效果:

优快云图标

几个问题探讨

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

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

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

比如我上传一张本地图片,成功插入后Markdown对应内容如下:

![这里写图片描述](https://img-blog.youkuaiyun.com/20150316184625949)

可以看出在我们上传本地图片成功后,优快云-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="优快云图标" />

效果:

优快云图标

问题3:Markdown中如何指定图片的对齐方式?

大家可能也注意到了,优快云-markdown编辑器显示的图片默认都是左对齐,那能不能将其改为居中对齐或右对齐呢?

答案是Markdown做不到,但跟「2」一样,我们可以借助html语法来实现,html中让一个元素居中的方式也有很多,下面给出两种方式供参考。

方法一(推荐):

如果只是居中对齐,则可以使用html中的<center>...</center>标签,包围在Markdown图片链接内容的外面即可,如下:

<center>
![优快云图标](http://imgtech.gmw.cn/attachement/jpg/site2/20111223/f04da22d7ba7105e1d7507.jpg "这是优快云的图标")
</center>

效果


优快云图标

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

方法二:

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

下面是居中对齐的写法示例:

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

效果:

优快云图标


注意: 这里如果大家仔细看的话可以发现上面闭合标签</div>缩进了一个空格,因为经我尝试,这里如果不缩进一个空格就达不到想要的效果,会造成某些Markdown语法失效。

Markdown语法中,可以使用以下方式插入图片: 1. 插入在线图片:使用以下语法,将图片的URL替换为实际的图片链接即可。 `![图片描述](图片链接 "图片标题")` 例如: `![优快云图标](http://imgtech.gmw.cn/attachement/jpg/site2/20111223/f04da22d7ba7105e1d7507.jpg "这是优快云的图标")` 2. 插入本地图片:首先需要将本地图片上传到服务器上,然后使用以下语法插入。 `![图片描述](服务器上图片的地址 "图片标题")` 一般情况下,Markdown编辑器会自动将上传的本地图片的地址插入Markdown内容中。你可以在上传图片后,在Markdown内容中加上图片描述和标题。 关于指定图片的高和宽,Markdown语法并没有提供直接的方式来设置图片的尺寸。但可以使用HTML的img标签来实现。例如: `<img src="图片链接" alt="图片描述" width="宽度" height="高度">` 你可以将图片链接替换为实际的图片链接,并指定宽度和高度来调整图片的尺寸。 请注意,在使用Markdown语法时,不同的编辑器可能会有一些差异,因此具体的插入图片方式可能会略有不同。建议根据你使用的编辑器的文档或参考资料来了解具体的插入图片方法和支持的语法。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [优快云-markdown语法之如何插入图片](https://blog.csdn.net/lanxuezaipiao/article/details/44310775)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值