GatsbyJS - Multiple Source Folders

Last Updated: 2023-12-06

gatsby-source-filesystem can load multiple folders. In gatsby-config.js:

{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/src/pages`,
    name: "pages"
  }
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/src/images`,
    name: "images"
  }
},

Then you can query images like src/images/logo.png like this:

query {
  logo: file(relativePath: { eq: "logo.png" }) {
    childImageSharp {
      gatsbyImageData(layout: FIXED)
    }
  }
}