9. Fix images not rendering

Theory

In this note, we'll fix the issue of images not getting rendered.
This will be pretty straight forward, as there is plugin for the same 😉

We'll use gatsby-plugin-sharp and gatsby-remark-images Gatsby plugin

Here is the article on gatsby.org that I've followed for this post.

Practical

1. Install

Install the plugin as follows:

npm install gatsby-remark-images gatsby-plugin-sharp

2. Configure

Tell gatsby to use these plugin by updating the gatsby-config.js as below

const siteMetadata = {
  title: `theRDnotes`,
  description: `my digital notebook...`,
};

module.exports = {
  siteMetadata: siteMetadata,
  plugins: [
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 800,
            },
          },
        ],
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/notes`,
        name: `notes`,
      },
    },
    `gatsby-plugin-postcss`,
  ],
};

Don't forget to restart your local/dev server after you have changed gatsby-config.js file

That's It!

Go ahead and add the images to your markdown files using below syntax

![alt text](./first-blog-post.png)

---

This GitHub commit represents what we've done in this post 🤩