fix: 修复 lightbox 图片打开为空的问题

components/Lightbox.tsx

@@ -1,25 +1,31 @@
 "use client";
-import withDeferredMount from "@/lib/utils/deferredMount";
 import PhotoSwipeLightbox from "photoswipe/lightbox";
 import "photoswipe/style.css";
 import { useEffect } from "react";
 
 const LightBox = () => {
   useEffect(() => {
-    const lightbox = new PhotoSwipeLightbox({
-      // may select multiple "galleries"
-      gallery: "article",
+    let lightbox;
+    setTimeout(() => {
+      lightbox = new PhotoSwipeLightbox({
+        // may select multiple "galleries"
+        gallery: "article",
 
-      // Elements within gallery (slides)
-      children: "p figure",
+        // Elements within gallery (slides)
+        children: "a",
 
-      // setup PhotoSwipe Core dynamic import
-      pswpModule: () => import("photoswipe"),
-    });
-    console.log(999,lightbox)
-    lightbox.init();
+        // setup PhotoSwipe Core dynamic import
+        pswpModule: () => import("photoswipe"),
+      });
+      lightbox.init();
+    }, 200);
+    return () => {
+      lightbox.destroy();
+      lightbox = null;
+    };
   }, []);
+
   return <></>;
 };
 
-export default withDeferredMount(LightBox, 100);
+export default LightBox;

lib/parseMDX.tsx

@@ -50,18 +50,20 @@ const components = {
   pre: Pre,
   img: async (props) => {
     return (
-      <figure suppressHydrationWarning>
-        <Image
-          unoptimized={nextConfig.output === "export"}
-          sizes="100vw"
-          style={{ width: "100%", height: "auto" }}
-          width={800}
-          height={600}
-          referrerPolicy="origin"
-          {...props}
-        />{" "}
-        <figcaption>{props.alt}</figcaption>
-      </figure>
+      <a href={props.src} data-pswp-width="800" data-pswp-height="600">
+        <figure suppressHydrationWarning>
+          <Image
+            unoptimized={nextConfig.output === "export"}
+            sizes="100vw"
+            style={{ width: "100%", height: "auto" }}
+            width={800}
+            height={600}
+            referrerPolicy="origin"
+            {...props}
+          />{" "}
+          <figcaption>{props.alt}</figcaption>
+        </figure>
+      </a>
     );
   },
 };

styles/globals.css

@@ -152,3 +152,7 @@ a {
   /* Place on top of each other */
   grid-area: 1 / 1 / 2 / 2;
 }
+
+.pswp__img {
+  object-fit: contain;
+}