reactjsmarkdowngatsbygatsby-image

Gatsby Starter Blog images not loading


i'm using the gatsby starter blog template to create a personal blog. I have made modifications to enhance a few features, though I haven't made any changes to image handling.

With that said, images do not seem to be rendering on the page when createPage is constructing log posts from the markdown files.

Markdown file image call

![linksx](./links.jpg) ![links1](../pages/roam-research-intro/links1.jpg)

Here I'm trying out if the image needs to be I the same folder as the markdown file, or in the same folder as the page template - neither works.

Files

enter image description here

Gatsby config

plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/assets`,
        name: `assets`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1000,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
    },

Result

result


Solution

  • Since both markdown and images are in the same directory you can simply specify the image like below

    ![linksx](./links.jpg)
    ![links1](./links1.jpg)
    

    If they were in different directories, you would need to configure the gatsby-source-filesystem

    Check the documentation for more information

    {
          resolve: `gatsby-source-filesystem`,
          options: {
            path: `${__dirname}/src/images`,
          },
        },
    

    and use a relative path

    Also ensure that the max size of image doesn't exceed the the maxWidth or else the images won't load. You can set a high enough value for maxWidth in case you cannot trim down the images