fix: 修复文档图片加载问题

Author: nullptr-z

website/src/component/Preview/index.js

@@ -36,10 +36,22 @@ const getBooleanValue = (param, field, defaultValue) => {
 
 const Preview = (mdData) => {
   const $dom = useRef(null);
+
+  const transformImageUri = (url) => {
+    const callback = (path) => {
+      const reqImage = require.context(path, true, /\.(png|gif|jpg|svg)$/);
+      const urlImage = reqImage(url);
+      return urlImage;
+    };
+    return mdData.transformImageUriPath(callback);
+  };
+
   return (
     <Wrapper ref={$dom}>
       <Markdown
+        {...mdData}
         disableCopy={true}
+        // transformImageUri={transformImageUri}
         source={mdData.source}
         rehypeRewrite={(node, index, parent) => {
           if (node.type === 'element' && parent && parent.type === 'root' && /h(1|2|3|4|5|6)/.test(node.tagName)) {

website/src/pages/docs/app-store/android/index.tsx

@@ -1,5 +1,11 @@
 import Preview from 'src/component/Preview';
 import md from './README.md';
 
-const DEMO = () => <Preview {...md} />;
+const transformImageUri = (url: string) => {
+  const reqImage = (require as any).context!('./', true, /\.(png|gif|jpg|svg)$/);
+  const urlAddr = reqImage(url);
+  return urlAddr;
+};
+
+const DEMO = () => <Preview {...md} transformImageUri={transformImageUri} />;
 export default DEMO;

website/src/pages/docs/app-store/ios/index.tsx

@@ -1,5 +1,11 @@
 import Preview from 'src/component/Preview';
 import md from './README.md';
 
-const DEMO = () => <Preview {...md} />;
+const transformImageUri = (url: string) => {
+  const reqImage = (require as any).context!('./', true, /\.(png|gif|jpg|svg)$/)
+  const urlAddr = reqImage(url)
+  return urlAddr
+}
+
+const DEMO = () => <Preview {...md} transformImageUri={transformImageUri} />;
 export default DEMO;

website/src/pages/docs/development/components/index.tsx

@@ -1,5 +1,11 @@
 import Preview from 'src/component/Preview';
 import md from './README.md';
 
-const DEMO = () => <Preview {...md} />;
+const transformImageUri = (url: string) => {
+  const reqImage = (require as any).context!('./', true, /\.(png|gif|jpg|svg)$/);
+  const urlAddr = reqImage(url);
+  return urlAddr;
+};
+
+const DEMO = () => <Preview {...md} transformImageUri={transformImageUri} />;
 export default DEMO;

website/src/pages/docs/environment-setup/android-windows/index.tsx

@@ -1,5 +1,11 @@
 import Preview from 'src/component/Preview';
 import md from './README.md';
 
-const DEMO = () => <Preview {...md} />;
+const transformImageUri = (url: string) => {
+  const reqImage = (require as any).context('./', true, /\.(png|gif|jpg|svg)$/);
+  const urlAddr = reqImage(url);
+  return urlAddr;
+};
+
+const DEMO = () => <Preview {...md} transformImageUri={transformImageUri} />;
 export default DEMO;

website/src/pages/docs/environment-setup/android/index.tsx

@@ -1,5 +1,11 @@
 import Preview from 'src/component/Preview';
 import md from './README.md';
 
-const DEMO = () => <Preview {...md} />;
+const transformImageUri = (url: string) => {
+  const reqImage = (require as any).context!('./', true, /\.(png|gif|jpg|svg)$/);
+  const urlAddr = reqImage(url);
+  return urlAddr;
+};
+
+const DEMO = () => <Preview {...md} transformImageUri={transformImageUri} />;
 export default DEMO;

website/src/pages/docs/environment-setup/ios/index.tsx

@@ -1,5 +1,11 @@
 import Preview from 'src/component/Preview';
 import md from './README.md';
 
-const DEMO = () => <Preview {...md} />;
+const transformImageUri = (url: string) => {
+  const reqImage = (require as any).context!('./', true, /\.(png|gif|jpg|svg)$/)
+  const urlAddr = reqImage(url)
+  return urlAddr
+}
+
+const DEMO = () => <Preview {...md} transformImageUri={transformImageUri} />;
 export default DEMO;

website/src/pages/docs/unpack/android/index.tsx

@@ -1,5 +1,11 @@
 import Preview from 'src/component/Preview';
 import md from './README.md';
 
-const DEMO = () => <Preview {...md} />;
+const transformImageUri = (url: string) => {
+  const reqImage = (require as any).context('./', true, /\.(png|gif|jpg|svg)$/);
+  const urlAddr = reqImage(url);
+  return urlAddr;
+};
+
+const DEMO = () => <Preview {...md} transformImageUri={transformImageUri} />;
 export default DEMO;

website/src/pages/docs/unpack/ios/index.tsx

@@ -1,5 +1,11 @@
 import Preview from 'src/component/Preview';
 import md from './README.md';
 
-const DEMO = () => <Preview {...md} />;
+const transformImageUri = (url: string) => {
+  const reqImage = (require as any).context('./', true, /\.(png|gif|jpg|svg)$/)
+  const urlAddr = reqImage(url)
+  return urlAddr
+}
+
+const DEMO = () => <Preview {...md} transformImageUri={transformImageUri} />;
 export default DEMO;