Gatsby: Outputting pictures from folder as Gatsby images

[d-ivashchuk]

Summary

I want to query all the images in one particular folder of the project, and output them as gatsby images using sharp plugin. I am jsut learning Gatsby and graphQL so my knowledge is obviously limited at this point in time, and I've already spent some days looking for solutions, but nothing worked.

Relevant information

Technically, I want to to get all the images from photos folder, which I included into gatsby-source-filesystem:

 {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `photos`,
        path: `${__dirname}/src/assets/photos`,
      },
    }

Grab them in the query:

export const query = graphql`
  query PhotosQuery {
    images: allImageSharp(filter: { id: { regex: "/photos/" } }) {
      sizes(maxWidth: 2000) {
        ...GatsbyImageSharpSizes
      }
    }
  }
`

And output them like this:

{data.images.edges.map(node=>(
<Img   
     key={node.id}
      title="Photo image"
      alt="Photo"
      sizes={node.sizes}></Img>
)}

Ultimately, I want to output grid of lazy-loaded, self-adjusting photos from the folder. I know that above-stated code does not work, and included it just for the purposes of showing my thinking process.

Thanks for any help!

[KyleAMathews]

Hey! That looks roughly correct! Have you tried your query in graphiql?

[pieh]

Your query should work for now, but You won't be able to use id like that in v2 ( https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/#dont-query-nodes-by-id )

How about something like that:

{
  allFile(filter:{extension:{regex:"/(jpeg|jpg|gif|png)/"},  sourceInstanceName:{eq:"photos"}}) {
    edges {
      node {
        childImageSharp {
          sizes(maxWidth: 2000) {
            ...GatsbyImageSharpSizes
          }
        }
      }
    }
  }
}

sourceInstanceName is name you used in gatsby-config.js so it will handle that directory (and subdirectories) and extension filter is to limit results just to images (that sharp plugin can handle)

[d-ivashchuk]

@KyleAMathews Yeah, I've tried it, but it didn't output any result that I needed.
@pieh Your soultion worked like a charm, I managed to get everything to work as expected!

[pieh]

Glad You got it working!

[d-ivashchuk]

I dont't know if it is worth to create another issue, but while it worked amazing in develoment mode, when I deployed it to gh-pages(using build version) all of the sudden all of the pictures that utilized Gatsby Image on my site stopped to load. Maybe you also have a quick fix for that. Thanks for help, I would be grateful even for tips like where to look!

[KyleAMathews]

Perhaps you need to setup a pathPrefix? https://www.gatsbyjs.org/docs/path-prefix/

[d-ivashchuk]

I haven't tried prefixes yet, but solved it for by deleting .cache folder, it seems like everything is working in build version now. Anyways thanks so much for help and support, will definitely add pathPrefix, as you suggested!