config: configure mdx image imports

Author: toothlessdev

gatsby-config.ts

@@ -10,17 +10,6 @@ const config: GatsbyConfig = {
     graphqlTypegen: true,
     plugins: [
         "gatsby-plugin-postcss",
-        "gatsby-plugin-image",
-        "gatsby-plugin-sharp",
-        "gatsby-transformer-sharp",
-        {
-            resolve: "gatsby-source-filesystem",
-            options: {
-                name: "images",
-                path: "./src/images/",
-            },
-            __key: "images",
-        },
         {
             resolve: "gatsby-source-filesystem",
             options: {
@@ -29,20 +18,6 @@ const config: GatsbyConfig = {
             },
             __key: "pages",
         },
-        {
-            resolve: `gatsby-plugin-mdx`,
-            options: {
-                extensions: [`mdx`, `md`],
-                gatsbyRemarkPlugins: [
-                    {
-                        resolve: `gatsby-remark-images`,
-                        options: {
-                            maxWidth: 590,
-                        },
-                    },
-                ],
-            },
-        },
         {
             resolve: `gatsby-source-filesystem`,
             options: {
@@ -60,6 +35,29 @@ const config: GatsbyConfig = {
                 extensions: [],
             },
         },
+        {
+            resolve: `gatsby-plugin-mdx`,
+            options: {
+                extensions: [`mdx`, `md`],
+                gatsbyRemarkPlugins: [
+                    {
+                        resolve: "gatsby-remark-mdx-relative-images",
+                        options: {
+                            staticFolderName: path.join(__dirname, "static"),
+                        },
+                    },
+                    {
+                        resolve: `gatsby-remark-images`,
+                        options: {
+                            maxWidth: 590,
+                        },
+                    },
+                ],
+            },
+        },
+        "gatsby-plugin-image",
+        "gatsby-plugin-sharp",
+        "gatsby-transformer-sharp",
     ],
 };
 

package.json

@@ -39,6 +39,9 @@
         "gatsby-plugin-sharp": "^5.14.0",
         "gatsby-remark-autolink-headers": "^6.14.0",
         "gatsby-remark-images": "^7.14.0",
+        "gatsby-remark-mdx-relative-images": "^1.1.1",
+        "gatsby-remark-relative-images": "^2.0.5",
+        "gatsby-remark-relative-images-v2": "^0.1.5",
         "gatsby-source-filesystem": "^5.14.0",
         "gatsby-transformer-remark": "^6.14.0",
         "gatsby-transformer-sharp": "^5.14.0",