Как быстро добавить изображения в Markdown Mdx * ​​1000 * на сайте Gatsby? - PullRequest
0 голосов
/ 19 февраля 2020

Я хочу разместить изображения рядом друг с другом, используя Markdown Mdx * ​​1012 * (для сайта Gatsby).

Таблицы не работают для меня, потому что:

  • необходимо добавить заголовки в столбцы (я просто хочу отображать изображения, без текста).
  • это не адаптивно для мобильных устройств (если изображения слишком большие, они должны отображаться в следующей строке)
  • размер изображения не может быть адаптирован

1 Ответ

1 голос
/ 19 февраля 2020

Вы можете передать объект пользовательских компонентов реакции на MDXProvider, а затем использовать их в файле MDX.

import image1 from "./7.jpg"
import image2 from "./6.jpg"
import image3 from "./3.jpg"

## Big ol pupper blep

<cols num="3">
  <image-card src={image1} title="Shooberino waggy">
    Pupperino dat tungg tho floofs big ol doggorino thicc pupperino
  </image-card>
  <image-card src={image2} title="Biscit corgo">
    Maximum borkdrive floofs very jealous pupper
  </image-card>
  <image-card src={image3} title="Long bois shoob">
    What a nice floof
  </image-card>
</cols>
...