title: Get all images from specific directory via GraphQL and Gatsby JS
body: <p>I have three folders with images that will be loaded in multiple carousel components. Here is the folder structure, I would get all the images that in the <code>collection</code> folders.</p>
  
  <pre><code>src/
     images/
       collection1/
       collection2/
       collection3/
       randomImage.jpg
       randomImage.svg
     components/
     pages/
  </code></pre>
  
  <p>I currently have this query:</p>
  
  <pre><code>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
              }
            }
          }
        }
      }
    }
  `;
  </code></pre>
  
  <p>Here is my <strong>gatsby-config.js</strong>:</p>
  
  <pre><code>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`],
        },
      },
    ],
  };
  </code></pre>
  
  <p>The issue with it is that returns ALL of the images in the project without a great way of organizing the specific images I want. </p>
  
  <p><a href="https://i.stack.imgur.com/3GLlg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3GLlg.png" alt="enter image description here"></a></p>
  
  <p>So how can I only get all of the images out of a specific directory (e.g. <code>collection1</code>)?</p>