Гэтсби: Как отобразить список изображений, указанных в файле yaml?

Question

Я использую текущую версию Gatsby (2.x) и хочу использовать gatsby-image для рендеринга галереи для продуктов.

У меня есть несколько файлов YAML для продуктов. Я уже могу создавать страницы с текстовым содержимым этих файлов, но я также хочу добавить небольшую галерею с изображениями, указанными в файле .yaml.

Пример файла YAML выглядит следующим образом:

product: "Some product"
description: "It is really awesome!"
screenshots:
  - /img/product1/screenshot1.jpg
  - /img/product1/screenshot2.jpg
  - /img/product1/screenshot3.jpg

Моя проблема сейчас в том, что я могу получить скриншоты только в виде строк, но я не знаю, как передать их для рендеринга.

Я думал о создании компонента, который берет имя файла и использует запрос для получения данных изображения - но он не может принимать никаких параметров, потому что он может использовать только статические запросы.

Я также не нашел способа передать результаты первого запроса graphql второму для данных изображения.

Answer 1

Если вы установили gatsby-transformer-sharp и gatsby-plugin-sharp и указали правильный путь к вашим изображениям, Gatsby автоматически выберет их и передаст их через резкость, следовательно, вы можете запросить эти изображения. Вы можете взглянуть на один из моих сайтов, который также использует YML-файл с путями к изображениям, которые я затем использую с gatsby-image: https://github.com/LekoArts/gatsby-starter-portfolio/blob/master/src/sites/sites.yaml