fix(frontend): use next/image to serve login page images

re #1207
sct · Mar 17, 2021 · cbf4519 · cbf4519
1 parent d226fc7
commit cbf4519
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/src/components/Common/ImageFader/index.tsx b/src/components/Common/ImageFader/index.tsx
@@ -4,11 +4,13 @@ import React, {
   HTMLAttributes,
   ForwardRefRenderFunction,
 } from 'react';
+import Image from 'next/image';
 
 interface ImageFaderProps extends HTMLAttributes<HTMLDivElement> {
   backgroundImages: string[];
   rotationSpeed?: number;
   isDarker?: boolean;
+  useImage?: boolean;
 }
 
 const DEFAULT_ROTATION_SPEED = 6000;
@@ -18,6 +20,7 @@ const ImageFader: ForwardRefRenderFunction<HTMLDivElement, ImageFaderProps> = (
     backgroundImages,
     rotationSpeed = DEFAULT_ROTATION_SPEED,
     isDarker,
+    useImage,
     ...props
   },
   ref
@@ -52,10 +55,29 @@ const ImageFader: ForwardRefRenderFunction<HTMLDivElement, ImageFaderProps> = (
             i === activeIndex ? 'opacity-100' : 'opacity-0'
           }`}
           style={{
-            backgroundImage: `${gradient}, url(${imageUrl})`,
+            backgroundImage: !useImage
+              ? `${gradient}, url(${imageUrl})`
+              : undefined,
           }}
           {...props}
-        />
+        >
+          {useImage && (
+            <>
+              <Image
+                className="absolute inset-0 w-full h-full"
+                alt=""
+                src={imageUrl}
+                layout="fill"
+                objectFit="cover"
+                quality={100}
+              />
+              <div
+                className="absolute inset-0"
+                style={{ backgroundImage: gradient }}
+              />
+            </>
+          )}
+        </div>
       ))}
     </div>
   );

diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx
@@ -63,6 +63,7 @@ const Login: React.FC = () => {
     <div className="relative flex flex-col min-h-screen bg-gray-900 py-14">
       <PageTitle title={intl.formatMessage(messages.signin)} />
       <ImageFader
+        useImage
         backgroundImages={[
           '/images/rotate1.jpg',
           '/images/rotate2.jpg',