From fedb91e206acf89e32e2a1bc887fed5f163eafde Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Sun, 25 Feb 2024 10:53:58 +0800
Subject: [PATCH] :bug: Use next image to wrap sanity assets make it accessible

---
 components/articles/ImageViewer.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/components/articles/ImageViewer.tsx b/components/articles/ImageViewer.tsx
index 8c6a65f..ca06736 100644
--- a/components/articles/ImageViewer.tsx
+++ b/components/articles/ImageViewer.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useRef } from "react";
+import Image from "next/image";
 import Zoomist from "zoomist";
 
 import "zoomist/css";
@@ -13,7 +14,7 @@ export default function ImageViewer({ src, alt }: { src: string, alt: string })
       new Zoomist(container.current, {
         maxScale: 5,
         bounds: true,
-        pinchable: true,
+        pinchable: true
       });
     }
   });
@@ -22,7 +23,14 @@ export default function ImageViewer({ src, alt }: { src: string, alt: string })
     <div ref={container} className="zoomist-container h-fit">
       <div className="zoomist-wrapper">
         <div className="zoomist-image h-fit">
-          <img src={src} alt={alt} />
+          <Image
+            src={src}
+            alt={alt}
+            width={0}
+            height={0}
+            sizes="100vw"
+            style={{ width: "100%", height: "auto" }}
+          />
         </div>
       </div>
     </div>