How do I query multiple images with gatsby-image?

Question

I have 16 images that I want to render out onto a website in a grid format.

I\'m using the following plugins for this:

• gatsby-image
• <

Answer 1

Despite the situation in currently asked question, where all of 16 images are inside the images folder which is then easy to just run a query to fetch all possible images. Like this (accepted answer):

{
  allImageSharp {
    edges {
      node {
        id
        fluid(maxWidth: 200, maxHeight: 200) {
            ...GatsbyImageSharpFluid
        }
      }
    }
  }
}

But in most cases you'd like to have subfolders inside the images folder for arranging images according to requirement. (At least that was my case).

So in that case: (where you have images inside a subfolder let's say beach inside images you can follow this approach)

export const query = graphql`
  query {
    allFile(filter: { relativeDirectory: { eq: "beach" } }) {
      edges {
        node {
          id
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }
    }
  }
`

This is a small egghead clip if you want to see in video.