Gatsbyjs：如何使用gatsby-remark-images和markdown实现高级图像样式？

Question

我有一个基于盖茨比的博客。帖子是用降价写的。我也在使用gatsby-remark-images。到目前为止一切都很棒。我想在博客文章中添加更多选项来对齐/格式化图像。即一行中有两三个图像的图库，每个图像的不同尺寸选项等。到目前为止，我的研究没有带来任何解决方案。我可以直接在markdown文件中使用HTML，但随后我将失去gatsby-remark-images的所有优势，因为HTML的内容不会被处理为markdown。

<div class="gallery">
    <div class="gallery__item">
        ![image to the left](./left.jpg) <- is not processed
    </div>
    <div class="gallery__item">
        ![image to the right](./right.jpg)
    </div>
</div>

我既不能为图像添加任何CSS类。我在一些“markdown-extra”编译器中看到了类似下面的解决方案。

![image](./image.jpg){.some-class}

盖茨比支持自定义组件（https://using-remark.gatsbyjs.org/custom-components/）。自定义组件是否允许仍将子项作为降价处理？类似下面的例子可能吗？

<image-gallery>
    ![image1](./1.jpg)
    ![image2](./2.jpg)
</image-gallery>

你能推荐其他解决方案吗？我只想更灵活地使用图像样式，并为每个图像或一组图像选择。比较在Medium上添加图像。您可以将它们制作成全屏，适合容器或浮动到一侧。我想我只需要能够将不同的CSS类传递给图像或其容器，其余的很容易。

有任何想法吗？

Answer 1

它比预期更容易，只需使用HTML和gatsby-remark-images也可以正确转换标签

<div class="gallery">
    <div class="gallery__item">
        <img alt="01" src="./01.jpg" />
    </div>
    <div class="gallery__item">
        <img alt="02" src="./02.jpg" />
    </div>
</div>