gatsby-remark-mdx-relative-images

Current plugin works with gatsby-plugin-mdx which include node type Mdx.
For gatsby-transformer-remark with node type MarkdownRemark use gatsby-remark-relative-images

Convert image paths in mdx frontmatter to be relative to their node's parent directory. This will help gatsby-plugin-image process images for mdx frontmatter. This was built for use with NetlifyCMS.

Install

• required gatsby-plugin-mdx

1# yarn
2yarn add gatsby-remark-mdx-relative-images
3
4# npm
5npm i gatsby-remark-mdx-relative-images

Usage Example

/gatsby-config.js

1const path = require('node:path')
2const staticFolder = path.join(__dirname, "/static");
3
4module.exports = {
5  /* ... */
6  plugins: [
7    // Add static assets before markdown files
8    {
9      resolve: 'gatsby-source-filesystem',
10      options: {
11        path: `${__dirname}/static/uploads`,
12        name: 'uploads',
13      },
14    },
15    // Add source for md/mdx content
16    {
17      resolve: 'gatsby-source-filesystem',
18      options: {
19        path: `${__dirname}/content`,
20        name: 'content',
21      },
22    },
23     {
24      resolve: 'gatsby-source-filesystem',
25      options: {
26        path: `${__dirname}/src/pages`,
27        name: 'pages',
28      },
29    },
30    {
31      resolve: `gatsby-plugin-mdx`,
32      options: {
33        extensions: [`.mdx`, `.md`],
34        gatsbyRemarkPlugins: [
35          {
36            resolve: `gatsby-remark-mdx-relative-images`,
37            options: {
38              // [Optional] The root of "media_folder" in your config.yml
39              // Defaults to "static"
40              staticFolderName: staticFolder,
41              // [Optional] Include the following fields, use dot notation for nested fields
42              // All fields are included by default
43              include: ['yourFieldInclude'],
44              // [Optional] Exclude the following fields, use dot notation for nested fields
45              // No fields are excluded by default
46              exclude: ['yourFieldExclude'],
47            },
48          }
49        ],
50        mdxOptions: []
51      },
52    },
53  ],
54};

/static/admin/config.yml

1# ...
2media_folder: static/uploads
3public_folder: /uploads
4# ...

/content/post.md || /content/post.mdx || /src/pages.md || /src/pages.mdx file example

1---
2templateKey: blog-post
3title: Post title
4description: Brewing with a Chemex probably seems like a complicated, time-consuming ordeal, but once you get used to the process, it becomes a soothing ritual that's worth the effort every time.
5date: 2017-01-04T15:04:10.000Z
6postImage: /uploads/postImage.jpg
7
8---
9
10![bodyImage](/uploads/bodyImage.jpg)
11
12## What is Lorem Ipsum?
13Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
141500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also 
15the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing 
16Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

ℹ️ Currently images paths from markdown fields will processed (=> /uploads/postImage.jpg)

graphQl query

1{
2  allMdx {
3    nodes {
4      frontmatter {
5        postImage {
6          childImageSharp {
7            gatsbyImageData(layout: FIXED)
8          }
9        }
10      }
11      body
12    }
13  }
14}