Showing images in markdown for gatsby

Question

I am following the Working with images in markdown posts and pages tutorial for gatsby and installed the following plugins

• gatsby-image
• gatsby-transformer-sharp
• gatsby-plugin-sharp

My images are in the same directory as my Markdown files in src/content. But my posts are still without images. I suspect I have to change something in my src/templates/blog-post.js to show the images but am unsure of the next step. Can someone tell me what changes I need to make?

Github

Answer 1

In order to embed images in markdown you also need gatsby-remark-images. Run yarn add gatsby-remark-images or npm install --save gatsby-remark-images.

Add this to your gatsby-config.js:

    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
        ],
      },
    },