Unable to view images from the body of a Markdown file in GatsbyJS

[Smiter15]

Description

Hi, I'm aware there are a couple other issues similar to this that have been closed but working with those solutions I was not able to solve my issue. These being #16612

I am not able to render images correctly when they are in the body of a markdown file. I have followed the instructions in the documentation here but to no avail.

Steps to reproduce

You can see the bug occurring here. The image path isn't the correct string, it looks like the gatsby-remark-relative-images plugin isn't picking up the images in the body format.

Gatsby config

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

module.exports = {
    siteMetadata: {
        title: 'Roundups - donate pennies as you spend',
        description:
            '',
        type: 'website',
        author: 'Roundups',
        siteUrl: 'https://www.roundups.org',
        keywords: ""
    },
    plugins: [
        'gatsby-plugin-react-helmet', // SEO
        'gatsby-plugin-sass', // SCSS modules integration
        'gatsby-transformer-sharp', // image processing
        'gatsby-plugin-sharp', // image processing
        {
            resolve: 'gatsby-transformer-remark',
            options: {
                plugins: [
                    'gatsby-remark-relative-images', // necessary for gatsby img to work on netlify CMS
                    {
                        resolve: 'gatsby-remark-images',
                        options: {
                            maxWidth: 1280
                        }
                    }
                ]
            }
        },
        {
            resolve: 'gatsby-source-filesystem', // read local files
            options: {
                name: 'uploads',
                path: `${__dirname}/src/static/uploads` // images uploaded to CMS
            }
        },
        {
            resolve: 'gatsby-source-filesystem',
            options: {
                name: 'images',
                path: `${__dirname}/src/images` // local images
            }
        },
        {
            resolve: 'gatsby-source-filesystem',
            options: {
                name: 'CMS pages',
                path: `${__dirname}/src/CMS` // MD files to create pages
            }
        },
        {
            resolve: 'gatsby-plugin-breadcrumb', // automatically create breadcrumbs, used for blog pages
            options: {
                useAutoGen: true
            }
        },
        {
            resolve: 'gatsby-plugin-google-analytics', // GA
            options: {
                trackingId: 'UA-xxx-x'
            }
        },
        {
            resolve: 'gatsby-plugin-favicon', // optimise favicon across devices
            options: {
                logo: './static/favicon.ico'
            }
        },
        'gatsby-plugin-sitemap', // automatically generate a sitemap
        'gatsby-plugin-netlify-cms', // necessary for CMS
        'gatsby-plugin-netlify' // for secure headers - keep last
    ]
};

Gatsby node

const path = require(`path`);
const { fmImagesToRelative } = require('gatsby-remark-relative-images');

exports.onCreateNode = ({ node }) => {
    fmImagesToRelative(node);
};

exports.createPages = async ({ actions, graphql, reporter }) => {
    const { createPage } = actions;

    const blogPostTemplate = path.resolve(`src/templates/blog.js`);

    const result = await graphql(`
        {
            allMarkdownRemark(
                sort: { order: DESC, fields: [frontmatter___date] }
                limit: 1000
            ) {
                edges {
                    node {
                        frontmatter {
                            path
                        }
                    }
                }
            }
        }
    `);

    // Handle errors
    if (result.errors) {
        reporter.panicOnBuild(`Error while running GraphQL query.`);
        return;
    }

    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
        createPage({
            path: node.frontmatter.path,
            component: blogPostTemplate,
            context: {} // additional data can be passed via context
        });
    });
};

MD file

---
path: /blog/roundups/why-roundups-exists-why-it-must-exist/
templateKey: blog-post
category: Roundups
title: Why Roundups Exists / Why it Must Exist
date: 2019-12-03T16:44:23.770Z
description: >-
  Creating a new form of donating to charities. Making penny donations
  mainstream again
featuredimage: /static/uploads/blog/on-a-mission.png
tags:
  - charities
  - micro-donations
  - mission
  - nonprofit
  - penny donations
  - social enterprise
  - tech for good
  - why
  - why roundups exist
---
I remember watching [Simon Sinek’s seminal ‘Start with Why’ Ted Talk](https://www.youtube.com/watch?v=u4ZoJKF_VuA) for the first time. I was probably 21 or 22. It struck a chord with me, like it does with most young entrepreneurs.

I set about reverse engineering the ‘Why’ into the business I was running at the time. It didn’t work and I struggled to find a genuine ‘Why’. I think this is normal.

Actually, I would go beyond this and say that you can have an amazing business without ever finding an awe-inspiring ‘Why’. Though, having that purity of thought definitely helps.

With roundups, I consider myself fortunate because our ‘Why’ is **crystal clear**. The wording of our vision or mission statements may have changed a few times since our launch in October (and they likely will again) but that’s just a case of finalising semantics.

The narrative is pretty simple. Just a few years ago, people would regularly give loose change to fundraisers, charity boxes or homeless people. Nowadays, nobody carries cash so nobody donates pennies and the result is that donation boxes all over the country are empty. Ask your local shop keeper the last time he or she brought the donation box at their till in to the bank.

The upshot of this seismic behavioural shift is that charities and not-for-profits are losing millions every year. [An estimated £80 million to be precise.](https://www.ft.com/content/e4af5670-c711-11e8-ba8f-ee390057b8c9)

**This is a serious problem.**

![McDonalds penny donation boxes](/static/uploads/blog/mcdonalds-pennies.jpg "McDonalds penny donation boxes - title")

The good news is that there are some fantastic initiatives using technology to help plug the gap –*more about that in a later blog post*– but with roundups we are really trying to change societal behaviour in a big way.

Imagine you donated a penny every time you tapped your contactless card.\
Imagine the 2 million people that use the tube every day donated a penny every time they touched in.\
That would equate to £120,000 every week. £6.2 million per year.

We are trying to drive a new behaviour in which tiny charitable penny donations are like a voluntary tax on purchases. As regular as contactless payment. Omnipresent. Mainstream.

**But before we get ahead of ourselves, I’ll get back to defining our ‘why’…**

### **WE STARTED WITH THIS MISSION:**

To generate new revenue streams for nonprofits by facilitating, encouraging and growing the widespread practise of micro donations.

### **THIS VISION:**

To facilitate over £20 million in new donations every year by serving 1,000,000 happy users on the roundups platform.

### **AND THESE VALUES:**

* **K**indness
* **I**ntegrity
* **T**ransparency
* **O**ptimism

### **NOW, WE SIMPLY SAY:**

We want to make penny donations mainstream (again.)

I’m under no illusions. I appreciate the magnitude of creating this sort of behavioural change. I know that many people – probably smarter and better-connected than me – have had this exact thought process many times before.\
\
Nevertheless, I think the timing is right to make it happen,\
\
Wish us luck.

Folder structure

Expected result

Render the images in frontmatter html from markdown files

Actual result

Image not rendering properly

Environment

System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  Browsers:
    Chrome: 80.0.3987.149
    Firefox: 73.0.1
    Safari: 13.0.5
  npmPackages:
    gatsby: ^2.19.7 => 2.19.7
    gatsby-image: ^2.2.41 => 2.2.41
    gatsby-plugin-breadcrumb: ^9.0.1 => 9.0.1
    gatsby-plugin-favicon: ^3.1.6 => 3.1.6
    gatsby-plugin-google-analytics: ^2.1.36 => 2.1.36
    gatsby-plugin-netlify: ^2.1.33 => 2.1.33
    gatsby-plugin-netlify-cms: ^4.1.40 => 4.1.40
    gatsby-plugin-react-helmet: ^3.1.22 => 3.1.22
    gatsby-plugin-sass: ^2.1.29 => 2.1.29
    gatsby-plugin-sharp: ^2.4.5 => 2.4.5
    gatsby-plugin-sitemap: ^2.2.27 => 2.2.27
    gatsby-remark-images: ^3.1.44 => 3.1.44
    gatsby-remark-relative-images: ^0.3.0 => 0.3.0
    gatsby-source-filesystem: ^2.1.48 => 2.1.48
    gatsby-transformer-remark: ^2.6.53 => 2.6.53
    gatsby-transformer-sharp: ^2.3.16 => 2.3.16
  npmGlobalPackages:
    gatsby-cli: 2.11.3

[vladar]

Hi @Smiter !

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction.

You already have almost all ingredients in place, just put them into a separate repo and we'll be able to take another look.

Thanks for using Gatsby! 💜

[Smiter15]

Hi @vladar, thanks for your reply! For the sake of this bug I have made the repo public for now. Let me know if any issues or how I can help!

[saschwarz]

FWIW: I just updated gatsby-remark-relative-images from 0.2.3 to 0.3.0 and none of the images within my MDX files were rendering. I downgraded and they started working again. There is an open issue in that repo: https://github.com/danielmahon/gatsby-remark-relative-images/issues/31

[Smiter15]

Thank you @saschwarz ! That worked for me :) @vladar thank you for your time. I will close this issue and follow the other one.