Как получить изображения из массива YAML в Gatsby.js

Я разрабатываю блог с Gatsby.js

Каждый пост представляет собой файл YAML, в котором есть массив для галереи, подобный этому:

gallery:
-'/uploads/image1.jpg'
-'/uploads/image2.jpg'
-'/uploads/image3.jpg'
-'/uploads/image4.jpg'
-'/uploads/image5.jpg'

в посте у меня что-то вроде этого:


const images = data.postData.frontmatter.gallery;

return (

{images.map((image, index) => {
            return (
  <img src={image}/>
)
}
)};

export const query = graphql`
query PostData($slug: String!) {
  postData: markdownRemark(fields: {slug: {eq: $slug}}) {
        frontmatter {
          gallery

        }
    }
}
`;

Но изображения не отображаются, поскольку они не обрабатываются и не помещаются в статическую папку во время сборки.

Насколько я понимаю, плагин gatsby-plugin-sharp не преобразует изображения, которые находятся в массиве в файле YAML, но он это делает, когда это всего лишь одно изображение ...

(в некоторых постах есть такое поле

main-image: 'path/to/the/image'

который затем я могу получить с помощью graphql следующим образом:

     main-image {
       fluid {
         src
       }
     }
   }

и вместо этого для массива 'gallery' узел 'Fluid' не создается.)

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

Спасибо,

M

ИЗМЕНИТЬ

Я пошел немного вперед благодаря @Z. Златев.

Я вставляю это в gatsby-node.js:

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions;
  const typeDefs = `
    type MarkdownRemark
    implements Node {
      frontmatter: Frontmatter
    }
    type Frontmatter {
      gallery: [File]
    }
  `;
  createTypes(typeDefs);
};

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

Однако, запрашивая изображения, я получаю null ...

Вот некоторые подробности:

Файл YAML:

---
date: 2019-11-06T13:47:07.000+00:00
title: Cool Project
main_picture: "/uploads/simon-matzinger-Gpck1WkgxIk-unsplash.jpg"
gallery:
 - "/uploads/PROEGELHOEF.jpg"
 - "/uploads/swapnil-dwivedi-N2IJ31xZ_ks-unsplash-1.jpg"
 - "/uploads/swapnil-dwivedi-N2IJ31xZ_ks-unsplash.jpg"
 - "/uploads/simon-matzinger-Gpck1WkgxIk-unsplash.jpg"
---

Вот запрос GraphQl:

query MyQuery {
  allMarkdownRemark(filter: {id: {eq: "af697225-a842-545a-b5e1-4a4bcb0baf87"}}) {
    edges {
      node {
        frontmatter {
          title
          gallery {
            childImageSharp {
              fluid {
                src
              }
            }
          }
        }
      }
    }
  }
}

Вот ответ с данными:

{
  "data": {
    "allMarkdownRemark": {
      "edges": [
        {
          "node": {
            "frontmatter": {
              "title": "Cool Project",
              "gallery": [
                {
                  "childImageSharp": null
                },
                {
                  "childImageSharp": null
                },
                {
                  "childImageSharp": null
                },
                {
                  "childImageSharp": null
                }
              ]
            }
          }
        }
      ]
    }
  }
}

Я все еще что-то упускаю ...


reactjs gatsby gatsby-image
person Matteo Carpi    schedule 10.12.2019    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Я постараюсь объяснить, как это работает в Гэтсби. Прежде всего, это gatsby-transformer-sharp плагин, который преобразует ваши File узлы в ImageSharp узлы. gatsby-plugin-sharp, конечно, тоже задействован как низкоуровневый API.

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

Рассмотрим следующий пример:

gatsby-project
├── content
│   ├── images
│   │   └── home.png
│   └── pages
│       └── home.yml
└── src

контент / страницы / home.yml

title: Homepage
url: /
image: ../images/home.png

Самым простым решением было бы указать правильные относительные пути в ваших файлах yaml. К сожалению, мы знаем, что это не всегда возможно. Примером этого являются файлы, созданные NetlifyCMS. Если это ваш случай, попробуйте некоторые из существующих решений, например: https://www.gatsbyjs.org/packages/gatsby-plugin-netlify-cms-paths/

Начиная с Gatsby 2.2.0 существует createSchemaCustomization API, который позволяет нам более изящно обрабатывать такие сценарии, определяя настраиваемые преобразователи и расширения полей, но это может быть пугающим для людей, не знакомых с GraphQL. Подробнее об этом читайте здесь.

person Z. Zlatev    schedule 11.12.2019
comment
Спасибо! это мне очень помогает. вставив это в мои слова (чтобы увидеть, действительно ли я понял) Гэтсби не распознает строки в массиве gallery как пути к файлам, поэтому плагин не преобразует файлы и не создает для них новые узлы. К сожалению, я использую Forestry.io в качестве CMS, поэтому я не могу использовать это быстрое исправление. Если я хорошо понимаю, мне следует настроить GraphQl, чтобы он сказал Гэтсби: "Привет!" если вы найдете массив с именем gallery, помните, что это список изображений! Превратите их, пожалуйста. Верный? Я посмотрю в документации, если у вас есть другие подсказки, как это сделать, я буду очень признателен :) M - person Matteo Carpi; 12.12.2019

arrow_upward
2
arrow_downward

Я решил, установив это: https://www.npmjs.com/package/@forestryio/gatsby-remark-normalize-paths

Спасибо, что направили меня в правильное русло.

M

person Matteo Carpi    schedule 19.12.2019