feat: view img

package.json

@@ -287,6 +287,7 @@
     "react-lazy-load-image-component": "^1.6.3",
     "react-loading-skeleton": "^3.5.0",
     "react-markdown": "^9.0.3",
+    "react-medium-image-zoom": "^5.2.13",
     "react-parallax-tilt": "^1.7.272",
     "react-pdf": "^9.2.1",
     "react-player": "^2.16.0",

src/pages/home/index.jsx

@@ -62,6 +62,8 @@ import {
   getDirection,
 } from '@utils/aidFn'
 import { fireConfetti } from '@utils/confetti'
+import Zoom from 'react-medium-image-zoom'
+import 'react-medium-image-zoom/dist/styles.css'
 import styles from './index.module.less'
 
 // const boxList = Array.apply(null, Array(10))
@@ -476,7 +478,9 @@ const Home = () => {
           to={{ opacity: 1, transform: 'translate(0, 0)' }}
           triggerOnce={true}
         >
-          <img src="https://picsum.photos/360/200.jpg" alt="" />
+          <Zoom>
+            <img src="https://picsum.photos/360/200.jpg" alt="" />
+          </Zoom>
         </AnimateOnScreen.DiyAnimation>
       </section>
       <section style={{ marginBottom: 40, display: 'flex' }}>