我已经使用Gatsby 入门博客模板设置了我的网站。
在我的 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("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"); 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>
我试过研究这个。我知道这是一组更有效地加载图像的功能,因此更好等等。
花哨的功能很好,但我需要将我的图像包装在figure
带有figcaption
- 而不是标签的<p>
标签中。(div
带有p
for 标题的 A 当然也可以。)
我如何实现这一目标?