feat: add blur option in next/image

SkyLightQP · Dec 3, 2024 · 552cdec · 552cdec
1 parent f778ef1
commit 552cdec
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/src/components/Dialogs/ImageDetailModal.tsx b/src/components/Dialogs/ImageDetailModal.tsx
@@ -36,7 +36,14 @@ const ImageDetailModal: React.FC<ImageDetailModalProps> = ({ modalController, im
       <ModalOverlay />
       <StyledModalContent>
         <ModalBody>
-          <StyledImage src={image.url} alt={image.alt} width={1024} height={768} />
+          <StyledImage
+            src={image.url}
+            alt={image.alt}
+            width={1024}
+            height={768}
+            placeholder="blur"
+            blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP0rAcAARcAyjleRTkAAAAASUVORK5CYII="
+          />
           <ImageLabel>{image.alt}</ImageLabel>
         </ModalBody>
       </StyledModalContent>