Gatsby
Up and Running with Gatsby: Images

Adding Image Plugins to gatsby-config

PRO

Now that we've added Gatsby Image, we need to configure it.

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.