GatsbyJS - Multiple Source Folders

Updated: 2020-05-10

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 {
      fixed(width: 180, height: 40) {
        ...GatsbyImageSharpFixed_noBase64
      }
    }
  }
}