in

Gatsby: Adding Images to Posts

Intro

We are currently working on the process of automatically creating pages for markdown files that are on the local directory. So far so good, but we still don’t have the ability to add images to the MD files. Currently the only thing that shows on the page is the alt tag. Let’s fix that.

Plugins

The problem is that Gatsby does not know where we are trying to fetch the image from. To solve this will require three plugins.

  • gatsby-plugin-sharp
  • gatsby-remark-images
  • gatsby-remark-relative-images

Configuration

Once those plugins are installed you just need to configure them. Check the plugin docs for instructions.

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.org/docs/gatsby-config/
 */

module.exports = {
  siteMetadata: {
    title: 'Gatsby Training',
    author: 'Nick Coughlin'
  },
  plugins: [
    'gatsby-plugin-sass',
    'gatsby-plugin-sharp',
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        // CommonMark mode (default: true)
        commonmark: true,
        // Footnotes mode (default: true)
        footnotes: true,
        // Pedantic mode (default: true)
        pedantic: true,
        // GitHub Flavored Markdown mode (default: true)
        gfm: true,
        // Plugins configs
        plugins: [
          'gatsby-remark-relative-images',
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 750,
              linkImagesToOriginal: false
            }
          }
        ],
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'src',
        path: `${__dirname}/src/`
      }
    }
  ],
}

And we have working pictures.

GitHub Repo

Ncoughlin: Gatsby-Bootcamp