feat: support to handle img source from local

package.json

@@ -62,6 +62,8 @@
     "@types/hast": "^2.3.4",
     "@umijs/core": "^4.0.9",
     "estree-util-to-js": "^1.1.0",
+    "hast-util-has-property": "^2.0.0",
+    "hast-util-is-element": "^2.1.2",
     "hast-util-to-estree": "^2.1.0",
     "mdast-util-to-string": "^3.1.0",
     "rehype-raw": "^6.1.1",

src/loaders/markdown/transformer/index.ts

@@ -1,6 +1,7 @@
 import type { IDumiTechStack } from '@/types';
 import rehypeDemo from './rehypeDemo';
 import rehypeJsxify from './rehypeJsxify';
+import rehypeImg from './rehypeImg';
 
 export interface IMdTransformerOptions {
   cwd: string;
@@ -32,6 +33,7 @@ export default async (raw: string, opts: IMdTransformerOptions) => {
       fileAbsPath: opts.fileAbsPath,
     })
     .use(rehypeJsxify)
+    .use(rehypeImg)
     .process(raw);
 
   return {

src/loaders/markdown/transformer/rehypeImg.ts

@@ -0,0 +1,38 @@
+import path from 'path';
+import type { Element, Root } from 'hast';
+import type { Transformer } from 'unified';
+
+let visit: typeof import('unist-util-visit').visit;
+let hasProperty: typeof import('hast-util-has-property').hasProperty;
+let isElement: typeof import('hast-util-is-element').isElement;
+
+// workaround to import pure esm module
+(async () => {
+  ({ visit } = await import('unist-util-visit'));
+  ({ hasProperty } = await import('hast-util-has-property'));
+  ({ isElement } = await import('hast-util-is-element'));
+})();
+
+function isRelativeUrl(url: string) {
+  return typeof url === 'string' && !/^(?:(?:blob:)?\w+:)?\/\//.test(url) && !path.isAbsolute(url);
+}
+
+/**
+ * rehype plugin to handle img source from local
+ */
+ export default function rehypeImg(): Transformer<Root> {
+  return tree => {
+    visit<Root, 'element'>(tree, 'element', (node: Element) => {
+      if (isElement(node, 'img') && hasProperty(node, 'src')) {
+        const src = node.properties!.src as string;
+
+        if (isRelativeUrl(src)) {
+          // use wrapper element to workaround for skip props escape
+          // https://github.com/mapbox/jsxtreme-markdown/blob/main/packages/hast-util-to-jsx/index.js#L159
+          // eslint-disable-next-line no-new-wrappers
+          node.properties!.src = `require('${decodeURI(src)}')`;
+        }
+      }
+    });
+  };
+}