feat(v2): support for adding relative images and handling broken image links

packages/docusaurus-mdx-loader/src/index.js

@@ -13,10 +13,11 @@ const matter = require('gray-matter');
 const stringifyObject = require('stringify-object');
 const slug = require('./remark/slug');
 const rightToc = require('./remark/rightToc');
+const relativePath = require('./remark/relativePath');
 
 const DEFAULT_OPTIONS = {
   rehypePlugins: [],
-  remarkPlugins: [emoji, slug, rightToc],
+  remarkPlugins: [emoji, slug, rightToc, relativePath],
 };
 
 module.exports = async function (fileString) {

packages/docusaurus-mdx-loader/src/remark/relativePath/index.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const visit = require('unist-util-visit');
+
+const plugin = () => {
+  const transformer = (root) => {
+    visit(root, 'image', (node) => {
+      if (node.url.startsWith('.')) {
+        node.type = 'jsx';
+        node.value = `<img ${node.alt ? `alt={"${node.alt}"}` : ''} ${
+          node.url ? `src={require("!url-loader!${node.url}").default}` : ''
+        } ${node.title ? `title={"${node.title}"}` : ''} />`;
+        if (node.url) {
+          delete node.url;
+        }
+        if (node.alt) {
+          delete node.alt;
+        }
+        if (node.title) {
+          delete node.title;
+        }
+      }
+    });
+  };
+
+  return transformer;
+};
+
+module.exports = plugin;