gatsby-plugin-image: how to loop through images from a directory?

[AgtLucas]

Hi everyone!

I have a directory with a bunch of images and I would like to loop through them and display them using GatsbyImage from gatsby-plugin-image, as I understood, I shouldn't use StaticImage in this case, right?

Apparently I'm doing almost everything in the right way, as I can see in the DOM the img tags being created, but they are lacking their sources.

Here's what I have now:

import * as React from "react";
import { useStaticQuery, graphql } from "gatsby";
import { GatsbyImage, getImage } from "gatsby-plugin-image";

const Sketches = () => {
  const data = useStaticQuery(
    graphql`
      query {
        sketches: allFile(filter: { relativeDirectory: { eq: "sketches" } }) {
          edges {
            node {
              id
              relativePath
              extension
              publicURL
              childImageSharp {
                gatsbyImageData
              }
            }
          }
        }
      }
    `
  );

  console.log({ data });

  return (
    <div>
      Hey!
      <p>You</p>
      {data.sketches.edges.map((image, i) => (
        <GatsbyImage key={i} image={image} alt="" />
      ))}
    </div>
  );
};

export default Sketches;

And here's the return of the query: https://gist.github.com/AgtLucas/9c1baaef73c44c5ab3f172f5c2854bfd

What am I missing? The docs says to use the getImage helper, but I can't make it work either.

Any help I would be very appreciate!

Thank you!

[AgtLucas]

I manage to make it work, turns out I was no passing the right image prop, I had to access a few object keys down instead of just passing image.