Gatsby / Markdown 上连续多张图片？答案

【问题标题】：Multiple images in a row on Gatsby / Markdown?Gatsby / Markdown 上连续多张图片？
【发布时间】：2020-12-03 13:09:15
【问题描述】：

很抱歉，如果这个问题已经被问过，但是有没有办法在 Gatsby 从文件 Markdown 生成的页面中并排放置两个图像（甚至是图像网格）？我开始在 Gatsby 下创建我的第一个站点，目前，我一次只能在整个宽度上显示一个图像（当我尝试并排复制时，它们将自己放在彼此之上。

在css上有什么可做的吗？或者配置发生在 gatsby-config.js 中？

如果有人有解决方案:)

非常感谢！！

这是我的 .md 文件中的两张图片

![description](picture.jpg) ![description](picture.jpg)

这是我的 gatsby-config.js 中关于 markdown 的部分

    'gatsby-plugin-sharp',
{
  resolve: 'gatsby-transformer-remark',
  options: {
    plugins: [
      'gatsby-remark-relative-images',
      {
        resolve: 'gatsby-remark-images',
        options: {
          maxWidth: 750,
          linkImagesToOriginal: false
        }
      }
    ]
  }
}

【问题讨论】：

标签： reactjs markdown gatsby gatsby-image

【解决方案1】：

不是一个干净的解决方案，在 Gatsby 中你可以用 div 容器包装你的图像。

代码（在降价中）

<div style = "display: flex; justify-content: center;">
  <div style = "width: 250px; 
  margin: 0 1rem;
    margin-bottom : 1.5rem;">
      <img style = "display: inline-block" src = "./6.jpeg">
  </div>
  <div style = "width: 250px; 
  margin: 0 1rem;
    margin-bottom : 1.5rem;">
      <img style = "display: inline-block" src = "./7.jpeg">
  </div>
</div>

结果将是：

希望对你有帮助:)

【讨论】：