perf: code

client/src/components/Markdown/Image.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import { Image, Skeleton } from '@chakra-ui/react';
+
+const MdImage = ({ src }: { src: string }) => {
+  const [isLoading, setIsLoading] = useState(true);
+  return (
+    <Skeleton minH="60px" isLoaded={!isLoading} fadeDuration={2}>
+      <Image
+        src={src}
+        alt={''}
+        fallbackSrc={'/imgs/errImg.png'}
+        onLoad={() => setIsLoading(false)}
+        onError={() => setIsLoading(false)}
+      />
+    </Skeleton>
+  );
+};
+
+export default MdImage;

client/src/components/Markdown/index.tsx

@@ -10,6 +10,7 @@ import styles from './index.module.scss';
 import CodeLight from './codeLight';
 import Loading from './Loading';
 import MermaidCodeBlock from './MermaidCodeBlock';
+import MdImage from './Image';
 
 const Markdown = ({
   source,
@@ -33,6 +34,9 @@ const Markdown = ({
       rehypePlugins={[rehypeKatex]}
       components={{
         pre: 'div',
+        img({ src = '' }) {
+          return <MdImage src={src} />;
+        },
         code({ node, inline, className, children, ...props }) {
           const match = /language-(\w+)/.exec(className || '');