如何阻止 Gatsby 在 <p> 标签中包装 Markdown 图片并隐藏图片说明？

Question

设置了我的网站

在我的 Markdown 文件中，我使用普通的 Markdown 符号来插入带标题的图像。出于某种原因——我认为是因为 gatsby-remark-images 插件等。 al.—我的图片自动包裹在 <p> 标签中，还有一些我不明白的其他东西。

这是 Safari 中的来源：

<p>
<span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 630px; ">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 75.31645569620254%; position: relative; bottom: 0px; left: 0px; background-image: url(&quot;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAgP/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABrpLFiI6H/8QAGRAAAwEBAQAAAAAAAAAAAAAAAAIDEwES/9oACAEBAAEFApUZV9NwWlEXChgYH//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EAB4QAAIBAwUAAAAAAAAAAAAAAAABIQISMREiMlFh/9oACAEBAAY/AraXA92ey3VR6Q0cjJ//xAAfEAACAQIHAAAAAAAAAAAAAAAAAREhMUFRYXGBkaH/2gAIAQEAAT8hRKV2NBJU8xWRKzQFhvcc7+DXM//aAAwDAQACAAMAAAAQeP8A/8QAFhEBAQEAAAAAAAAAAAAAAAAAABEB/9oACAEDAQE/EKuP/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAR/9oACAECAQE/EAsb/8QAHBABAQACAgMAAAAAAAAAAAAAAREAITFRYXHB/9oACAEBAAE/ELQqcxD8xRBQRCaSnWANCBRPWIa6O6WmNO5Cb9fPjJeJ9on3P//Z&quot;); background-size: cover; display: block; transition: opacity 0.5s 0.5s; opacity: 0;"></span><img class="gatsby-resp-image-image" alt="Tøyen barnehage er en av fem kommunale barnehager i Nittedal. <cite>Nittedal kommune</cite>" title="Tøyen barnehage er en av fem kommunale barnehager i Nittedal. <cite>Nittedal kommune</cite>" src="/static/6c4a2d09ef212e5058dc411fbe918fb9/828fb/toyen-barnehage-2.jpg" srcset="/static/6c4a2d09ef212e5058dc411fbe918fb9/ff44c/toyen-barnehage-2.jpg 158w,
/static/6c4a2d09ef212e5058dc411fbe918fb9/a6688/toyen-barnehage-2.jpg 315w,
/static/6c4a2d09ef212e5058dc411fbe918fb9/828fb/toyen-barnehage-2.jpg 630w,
/static/6c4a2d09ef212e5058dc411fbe918fb9/0ede0/toyen-barnehage-2.jpg 945w,
/static/6c4a2d09ef212e5058dc411fbe918fb9/6a068/toyen-barnehage-2.jpg 960w" sizes="(max-width: 630px) 100vw, 630px" style="width: 100%; height: 100%; margin: 0px; vertical-align: middle; position: absolute; top: 0px; left: 0px; opacity: 1; transition: opacity 0.5s; color: inherit; box-shadow: white 0px 0px 0px 400px inset;" loading="lazy" decoding="async">
</span>
</p>

我试过研究这个。我知道它有一堆功能可以更有效地加载图像，因此更好等等。

花哨的功能很好，但我需要将图像包裹在带有 figcaption 的 figure 中，而不是 <p> 标签。（标题 div 和 p 当然也可以。）

我该如何实现？

Answer 1

因为这是默认配置，gatsby-remark-images that to customize the output, you'll need to add a custom component rendering. Luckily, there's a plugin that makes this configuration far easy: gatsby-remark-figure-caption 中没有选项。只需将它添加到 gatsby-transformer-remark:

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-figure-caption`,
        },
      ],
    },
  },
]

并将输出：

<figure>
  <img src="path-to-image.jpg">
  <figcaption>image with description</figcaption>
</figure>

如何阻止 Gatsby 在 <p> 标签中包装 Markdown 图片并隐藏图片说明？

How do I stop Gatsby from wrapping Markdown images in <p> tags and hiding image captions?

gatsby

gatsby-remark-image