Markdown 图片 - 绿叶网

Markdown 插入图片

在 Markdown 中，插入图片是一种非常实用的功能，它允许我们在文档中嵌入各种格式的图像（包括 JPG、PNG、GIF 等）。

语法：

![图片描述](图片链接 "图片标题")

说明：

“图片描述” 是对图片的文字描述，用于在图片无法显示时作为替代文本，它可以提高图片的可访问性。其中，“图片描述” 最终会渲染成 HTML 中 img 标签的 alt 属性。

“图片链接” 是图片的 URL 地址，它可以是绝对路径（比如网络图片的地址），也可以是相对路径（比如本地图片的地址）。

“图片标题” 是可选的，当鼠标悬停在图片上时会显示这段文本。其中，“图片标题” 最终会渲染成 HTML 中 img 标签的 title 属性（另请参阅 “HTML 图片”）。

注意: Markdown 插入图片具体的显示效果会受到 Markdown 编辑器或渲染器的影响。某些编辑器可能支持更多的图片设置，例如调整图片大小、对齐方式等，但这些通常不是 Markdown 的标准语法。

接下来，我们通过几个简单的例子来介绍一下 Markdown 是如何插入图片的。

![鸟儿](https://www.lvyenet.com/static/imgs/examples/bird.jpg "鸟儿")

渲染效果如下图所示。

Markdown 插入网络图片

生成 HTML 代码如下。

<img src="https://www.lvyenet.com/static/imgs/examples/bird.jpg" alt="鸟儿" title="鸟儿">

分析：

上面代码表示插入网络上的一张图片，图片地址为 https://www.lvyenet.com/static/imgs/test/bird.jpg。并且这里还设置了图片的 alt 和 title 属性。

![山羊](imgs/goat.jpg "山羊")

渲染效果如下图所示。

Markdown 插入本地图片

生成 HTML 代码如下。

<img src="imgs/goat.jpg" alt="山羊" title="山羊">

分析：

上面 Markdown 代码用于插入本地图片，其中 "imgs/goat.jpg" 是图片文件的相对路径。我们需要确保该图片文件位于相对于 Markdown 文档的正确路径下。

[![绿叶网 Logo](imgs/logo.jpg)](https://www.lvyenet.com)

渲染效果如下图所示。

Markdown 插入图片链接

生成 HTML 代码如下。

<a href="https://www.lvyenet.com">
    <img src="imgs/logo.jpg" alt="绿叶网 Logo">
</a>

分析：

我们可以把 “图片语法” 包裹在 “链接语法” 里面，这样就可以实现图片链接效果了。

1. 如果想要修改 Markdown 中的图片大小，应该怎么做？

标准 Markdown 是不支持调整图片大小的。如果想要改变图片大小，应该考虑使用以下 2 种方式：

使用 HTML：直接在 Markdown 中嵌入 HTML 标签来控制，例如：<img src="bird.jpg" width="200" />。
使用 CSS：比如使用 width 属性来控制宽度，以及使用 height 属性来控制高度。

感兴趣的小伙伴，可以查看我们的：HTML 教程和 CSS 教程。