FEAT: add image styling in markdown (#2441)

Co-authored-by: crazywoola <427733928@qq.com>

web/app/components/base/markdown.tsx

@@ -143,6 +143,37 @@ export function Markdown(props: { content: string; className?: string }) {
                 </code>
               )
           },
+          img({ src, alt, ...props }) {
+            return (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={src}
+                alt={alt}
+                width={250}
+                height={250}
+                className="max-w-full h-auto align-middle border-none rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out mt-2 mb-2"
+                {...props}
+              />
+            )
+          },
+          p: (paragraph) => {
+            const { node }: any = paragraph
+            if (node.children[0].tagName === 'img') {
+              const image = node.children[0]
+
+              return (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={image.properties.src}
+                  width={250}
+                  height={250}
+                  className="max-w-full h-auto align-middle border-none rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out mt-2 mb-2"
+                  alt={image.properties.alt}
+                />
+              )
+            }
+            return <p>{paragraph.children}</p>
+          },
         }}
         linkTarget='_blank'
       >