Получить все изображения из определенного каталога через GraphQL и Gatsby JS - PullRequest
Новая
       17

Получить все изображения из определенного каталога через GraphQL и Gatsby JS

0 голосов
/ 02 мая 2018

У меня есть три папки с изображениями, которые будут загружены в несколько компонентов карусели. Вот структура папок, я бы получил все изображения, которые в папках collection. 

src/
   images/
     collection1/
     collection2/
     collection3/
     randomImage.jpg
     randomImage.svg
   components/
   pages/

У меня сейчас есть этот запрос: 

export const pageQuery = graphql`
  query IndexQuery {
    site {
      siteMetadata {
        title
      }
    }
    heroFeaturedImage: imageSharp(id: { regex: "/war-room.jpg/" }) {
      sizes(maxWidth: 1250, quality: 90) {
        ...GatsbyImageSharpSizes
      }
    }
    allImageSharp {
      edges {
        node {
          ... on ImageSharp {
            sizes(maxWidth: 1250, quality: 90) {
              src
              srcSet
              originalName
            }
          }
        }
      }
    }
  }
`;

Вот мой gatsby-config.js : 

module.exports = {
  siteMetadata: {
    title: 'Get all images in directory test',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-styled-components',
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/images`,
        name: 'images',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `collection1`,
        path: `${__dirname}/src/images/collection1`,
      },
    },
    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [`Roboto\:300,400,500,600`, `Montserrat\:300,400,600,800`],
      },
    },
  ],
};

Проблема в том, что возвращает ВСЕ изображения в проекте без отличного способа организации определенных изображений, которые я хочу.

enter image description here

Так как же я могу получить все изображения только из определенного каталога (например, collection1)?

1 Ответ

0 голосов
/ 03 мая 2018

Пара вещей прыгает на меня, хотя я не уверен, что это решит это:

1) Каким-то странным в gatsby-config.js вы звоните gatsby-source-filesystem дважды, что равняется одному и тому же набору изображений. Я думаю, что вы могли бы проиграть этот вызов на collection1 набор, он, как я понимаю, избыточен.

2) Похоже, что запрос allImageSharp делает то, что должен, и возвращает все. Вы пробовали запрос как: 

export const pageQuery = graphql`
  query IndexQuery {
    site {
      siteMetadata {
        title
      }
    }
    collectionOneImages: imageSharp(id: { regex: "^\/collection1\/?(?:[^\/]+\/?)*$" }) {
      sizes(maxWidth: 1250, quality: 90) {
        ...GatsbyImageSharpSizes
      }
    }
    collectionTwoImages: imageSharp(id: { regex: "^\/collection2\/?(?:[^\/]+\/?)*$" }) {
      sizes(maxWidth: 1250, quality: 90) {
        ...GatsbyImageSharpSizes
      }
    }
    collectionThreeImages: imageSharp(id: { regex: "^\/collection3\/?(?:[^\/]+\/?)*$" }) {
      sizes(maxWidth: 1250, quality: 90) {
        ...GatsbyImageSharpSizes
      }
    }
  }
`;

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

...