优化图片预览

tone-page-web/app/(with-header-footer)/blog/[id]/page.tsx

@@ -8,6 +8,8 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
 import 'highlight.js/styles/github.css'
+import { PhotoProvider, PhotoView } from 'react-photo-view';
+import 'react-photo-view/dist/react-photo-view.css';
 
 export default function Blog() {
     const params = useParams();
@@ -42,7 +44,13 @@ export default function Blog() {
                             h4: ({ node, ...props }) => <h4 className="text-lg font-bold" {...props} />,
                             h5: ({ node, ...props }) => <h5 className="text-md font-bold" {...props} />,
                             p: ({ node, ...props }) => <p className="py-2 text-zinc-700" {...props} />,
-                            img: ({ node, ...props }) => <img className="w-full shadow" {...props} />,
+                            img: ({ node, src, ...props }) => (
+                                <PhotoProvider>
+                                    <PhotoView src={src as string}>
+                                        <img src={src} alt="" {...props} />
+                                    </PhotoView>
+                                </PhotoProvider>
+                            ),
                             th: ({ node, ...props }) => <th className="text-ellipsis text-nowrap border border-zinc-300 p-2" {...props} />,
                             td: ({ node, ...props }) => <td className="border border-zinc-300 p-1" {...props} />,
                             table: ({ node, ...props }) => <div className="overflow-x-auto"><table {...props} /></div>,

tone-page-web/package.json

@@ -41,6 +41,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
+    "react-photo-view": "^1.2.7",
     "rehype-highlight": "^7.0.2",
     "remark-gfm": "^4.0.1",
     "select": "^1.1.2",

tone-page-web/pnpm-lock.yaml

@@ -104,6 +104,9 @@ importers:
       react-markdown:
         specifier: ^10.1.0
         version: 10.1.0(@types/react@19.1.2)(react@19.1.0)
+      react-photo-view:
+        specifier: ^1.2.7
+        version: 1.2.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       rehype-highlight:
         specifier: ^7.0.2
         version: 7.0.2
@@ -2729,6 +2732,12 @@ packages:
       '@types/react': '>=18'
       react: '>=18'
 
+  react-photo-view@1.2.7:
+    resolution: {integrity: sha512-MfOWVPxuibncRLaycZUNxqYU8D9IA+rbGDDaq6GM8RIoGJal592hEJoRAyRSI7ZxyyJNJTLMUWWL3UIXHJJOpw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
   react-remove-scroll-bar@2.3.8:
     resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
     engines: {node: '>=10'}
@@ -6076,6 +6085,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  react-photo-view@1.2.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   react-remove-scroll-bar@2.3.8(@types/react@19.1.2)(react@19.1.0):
     dependencies:
       react: 19.1.0