您的位置:

Markdown添加图片详解

一、Markdown添加图片标题

在Markdown中添加图片时,可以使用标题对图片进行分类和归档。使用示例:

# 狗狗图片
![狗狗图片](https://example.com/dog.jpg)

该示例中,我们使用了标题“狗狗图片”来描述图片内容。而在“![狗狗图片](https://example.com/dog.jpg)”中,我们使用了“!”和“[]”两个符号来引用图片链接。

二、Markdown添加图片方式

Markdown添加图片方式的常用方法包括两大类型:链接式和直接式。具体详解如下:

1. 链接式

在链接式中,我们需要先用“[]”包含图片的文字描述,再用“()”包含图片链接。使用示例:

![狗狗图片](https://example.com/dog.jpg)

该示例中,我们使用了“![狗狗图片](https://example.com/dog.jpg)”来添加狗狗图片。其中“![狗狗图片]”是图片的文字描述,“(https://example.com/dog.jpg)”是图片的链接。

2. 直接式

在直接式中,我们直接引用图片链接,并在链接后添加一个空格和图片描述。使用示例:

https://example.com/dog.jpg  狗狗图片

该示例中,我们使用了“https://example.com/dog.jpg 狗狗图片”来添加狗狗图片。其适用于不需要图片预览的场景,如在文本编辑器中添加图片。

三、Markdown怎么添加图片

Markdown添加图片的基本语法已经在上一小节中阐述。对于不同的场景和需求,我们可以使用不同的添加图片方法。

1. 添加在线图片

如果图片来源于网络,我们只需要将图片链接放在“[]”中,将链接放在“()”中即可。使用示例:

![狗狗图片](https://example.com/dog.jpg)

在实际工作中,我们可以使用微博、知乎等平台提供的上传图片功能,生成上传后的图片链接,在Markdown中进行引用。

2. 添加本地图片

如果图片是本地磁盘中的图片,我们可以使用相对路径的方式进行引用。使用示例:

![狗狗图片](./images/dog.jpg)

其中,“./images/dog.jpg”表示相对于Markdown文件的路径,该路径中“./”表示当前目录,“images/”表示图片所在文件夹,“dog.jpg”表示图片文件名。

四、Markdown图片大小

如果在添加图片时需要指定图片的大小,我们可以使用HTML标签“”来实现。使用示例:

<img src="https://example.com/dog.jpg" width="50%" height="50%">

该示例中,我们使用了HTML标签“”来添加图片,并通过属性“width”和“height”指定了图片的大小。在HTML标签内部,我们可以给图片添加更多的样式和属性。

五、Markdown怎么放图片

Markdown放置图片的位置也是需要注意的。一般来说,我们可以放置在当前段落的下方,或者放在下一个段落中。使用示例:

狗狗非常可爱,如图:
![狗狗图片](https://example.com/dog.jpg)

该示例中,我们将图片放置在了“狗狗非常可爱,如图:”下方,并通过“
”换行符隔开了文本。如果图片和文字不在同一段落中,我们可以在下一个段落中添加图片。

六、Markdown图片嵌入

在Markdown中,我们可以将图片嵌入到正文中,使得图片与文本更加紧密。具体实现方法如下:

在这张可爱的狗狗图片中,它正在追逐一只小鸟:
![img](data:image/jpeg;base64,/9j/4AAQSkZJRgA...)

该示例中,我们使用了data URI的方式将图片嵌入到正文中。在“![img]”中,我们使用了字符串“data:image/jpeg;base64,/9j/4AAQSkZJRgA...”来表示图片的base64编码。需要注意的是,嵌入过大的图片可能会导致Markdown文件过大。

七、Markdown图片相对路径

在添加本地图片时,我们需要使用相对路径的方式进行引用。但是,相对路径的写法可能会因为不同的操作系统和浏览器而出现差异。

建议使用相对于根目录的路径来引用本地图片。例如,我们在使用GitHub来托管Markdown文件时,可以使用“/images/dog.jpg”来表示图片的相对路径。使用示例:

![狗狗图片](/images/dog.jpg)

八、Markdown如何添加本地图片

在使用Markdown添加本地图片时,我们需要使用相对路径的方式进行引用。具体步骤如下:

1. 准备图片文件

在本地磁盘中准备好需要添加的图片文件。需要注意的是,Markdown和图片文件应该放置在同一级目录或者子目录中。

2. 插入图片链接

在Markdown文件中插入相应的图片链接,使用相对路径的方式进行引用。

![狗狗图片](./images/dog.jpg)

3. 上传图片文件

在使用Git托管Markdown文件时,需要将图片文件上传至指定的文件夹中。使用示例:

git add images/dog.jpg
git commit -m "add dog.jpg file"
git push

通过上述步骤,我们就可以在Markdown中添加本地图片了。