Несколько изображений подряд на Gatsby / Markdown?

Извините, если этот вопрос уже задавался, но есть ли способ разместить два изображения рядом (или даже сетку изображений) на странице, созданной Gatsby из файла Markdown? Я начинаю создание своего первого сайта под Gatsby, и на данный момент мне удается отображать только одно изображение за раз по всей ширине (когда я пытаюсь дублировать рядом, они ставятся друг на друга.

Есть чем заняться на css? Или настройка происходит в gatsby-config.js?

Если у кого есть решение :)

Большое спасибо !!

Вот два изображения в моем .md файле

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

Вот часть о уценке моего gatsby-config.js

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

person stellarHobbes    schedule 13.08.2020    source источник


Ответы (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>

результат будет:

введите описание изображения здесь

Я надеюсь, это поможет вам :)

person Chanmin    schedule 08.12.2020