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

【问题标题】：Gatsbyjs: how to implement advanced image styling with gatsby-remark-images and markdown?Gatsbyjs：如何使用 gatsby-remark-images 和 markdown 实现高级图像样式？
【发布时间】：2018-09-26 05:13:56
【问题描述】：

我有一个基于 Gatsby 的博客。帖子是用降价写的。我也在使用 gatsby-remark-images。到目前为止一切都很好。我想添加更多选项来对齐/格式化博客文章中的图像。 IE。一排两到三张图片的画廊，每张图片有不同的尺寸选项等。到目前为止，我的研究没有带来任何解决方案。我可以直接在 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}

Gatsby 支持自定义组件 (https://using-remark.gatsbyjs.org/custom-components/)。自定义组件是否允许仍将子组件作为降价处理？下面的例子有可能吗？

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

您能推荐任何其他解决方案吗？我只想在图像样式方面更加灵活，并为每个图像或一组图像提供选项。与在 Medium 上添加图像进行比较。您可以将它们设为全屏、适合容器或浮动到一侧。我想我只需要能够将不同的 CSS 类传递给图像或其容器，其余的都很容易。

有什么想法吗？

【问题讨论】：

标签： markdown gatsby

【解决方案1】：

gatsby-remark-image-attributes 插件可以提供你所需要的，无需将组件注入到markdown。

基于作者的readme，加上配置的gatsby-remark-images，如下markdown：

![party](./images/emojis/party.png#box-shadow=2px 2px 6px 0px;float=right)

会产生如下的 HTML 标记：

<span style="box-shadow: 2px 2px 6px 0px; float: right;">
  <span class="gatsby-resp-image-wrapper" ...>
    <span class="gatsby-resp-image-background-image" ...></span>
    <img
      class="gatsby-resp-image-image"
      alt="party"
      title="party"
      src="/static/4d415e7127c0f88799cd9f357aabc732/b7060/party.png"
      ...
  /></span>
</span>

但是，有一个outstanding issue，阻止它与gatsby: 2.24.2 一起使用。

【讨论】：

【解决方案2】：

这比预期的要容易，只需使用 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>

【讨论】：

这对我不起作用。您对 gatsby-remark-images 的设置是什么？
那是 2 年前的事了，所以可能发生了一些变化，我不再了解 gatsby，抱歉