Fix the about page image display

src/app/(normal)/about/page.tsx

@@ -1,4 +1,5 @@
 import { prisma } from "@/lib/prisma";
+import Image from "next/image";
 import ReactMarkdown from "react-markdown";
 
 export default async function AboutPage() {
@@ -9,7 +10,24 @@ export default async function AboutPage() {
   return (
     <div className="mx-auto w-full max-w-6xl px-4 py-8">
       <div className="markdown text-center">
-        <ReactMarkdown>{about?.markdown}</ReactMarkdown>
+        <ReactMarkdown
+          components={{
+            img: ({ src, alt }) => {
+              if (!src || typeof src !== "string") return null;
+              return (
+                <Image
+                  src={src}
+                  alt={alt ?? ""}
+                  width={1200}
+                  height={800}
+                  className="max-w-full h-auto rounded-md border border-border"
+                />
+              );
+            },
+          }}
+        >
+          {about?.markdown}
+        </ReactMarkdown>
       </div>
     </div>
   );