Adding Image Plugins to gatsby-config

We've installed gatsby-image, gatsby-plugin-sharp, and gatsby-transformer-sharp. We need to add the last two to our gatsby-config.js file's plugins array:

plugins: [
  // everything else remains the same
    `gatsby-plugin-sharp`,
   `gatsby-transformer-sharp`,
]

We also need to tell Gatsby to pull our images folder into GraphQL. We can do this by adding another instance of gatsby-source-filesystem to the same plugins array:

plugins: [
  // everything else remains the same
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/`,
      },
    },
]

This way, Gatsby knows about everything in our src folder. We could have directly used /src/images, but this could cause some confusion using relative paths for images throughout the application.

So, how do we actually use an image using this stuff? Let's build our first image query in the next video.