对于带标题的图像，正确的HTML是<figure> with <figcaption>。

没有相应的Markdown，所以如果你只是偶尔添加标题，我建议你只添加html到你的Markdown文档:

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

<figure>
  <img src="{{site.url}}/assets/image.jpg" alt="my alt text"/>
  <figcaption>This is my caption text.</figcaption>
</figure>

Vestibulum eu vulputate magna...

Markdown规范鼓励您在这种情况下嵌入HTML，这样就可以很好地显示。它也比摆弄插件简单得多。

如果你试图使用其他Markdown特性(如表格、星号等)来生成标题，那么你只是在改变Markdown的使用方式。

这里有一个最简单(但不是最漂亮)的解决方案:在整个东西周围做一个表格。显然存在缩放问题，这就是为什么我用HTML给出示例的原因，这样您就可以轻松地修改图像大小。这对我很管用。

| <img src="" alt="" style="width: 400px;"/> |
| My Caption |

你可以使用这个javascript从图像的alt自动生成一个图标题。

您可以添加一些css使底部文本看起来更真实。

这同样适用于降价。[HERE]()会出现在图像下方。

var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
    var altText = images[i].getAttribute("alt");
    var figcaption = document.createElement("figcaption");
    figcaption.innerHTML = altText;
    images[i].insertAdjacentElement("afterend", figcaption);
}

var images = document.getElementsByTagName（“img”）; for （var i = 0; i < images.length; i++） { var altText = images[i].getAttribute（“alt”）; var figcaption = document.createElement（“figcaption”）; figcaption.innerHTML = altText; images[i].insertAdjacentElement（“afterend”， figcaption）; } <img src=“https://www.w3schools.com/tags/img_girl.jpg” alt=“穿夹克的女孩”>

如果你不想使用任何插件(这意味着你可以直接将它推送到GitHub，而不需要先生成站点)，你可以在_includes中创建一个名为image.html的新文件:

<figure class="image">
  <img src="{{ include.url }}" alt="{{ include.description }}">
  <figcaption>{{ include.description }}</figcaption>
</figure>

然后显示图像从您的markdown:

{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}

对于带标题的图像，正确的HTML是<figure> with <figcaption>。

没有相应的Markdown，所以如果你只是偶尔添加标题，我建议你只添加html到你的Markdown文档:

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

<figure>
  <img src="{{site.url}}/assets/image.jpg" alt="my alt text"/>
  <figcaption>This is my caption text.</figcaption>
</figure>

Vestibulum eu vulputate magna...

Markdown规范鼓励您在这种情况下嵌入HTML，这样就可以很好地显示。它也比摆弄插件简单得多。

如果你试图使用其他Markdown特性(如表格、星号等)来生成标题，那么你只是在改变Markdown的使用方式。

<p align="center">
  <img alt="img-name" src="/path/image-name.png" width="300">
  <br>
    <em>caption</em>
</p>

这是基本的标题用法。不需要使用额外的插件。