Attempt to fix image loading issue

coopsoc · Jun 22, 2024 · 36924c6 · 36924c6
1 parent c8ca46c
commit 36924c6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/components/team/ExecCard.tsx b/components/team/ExecCard.tsx
@@ -23,7 +23,13 @@ const ExecCard = ({ data, colour }: ExecCardProps) => {
               <p className={styles["person-text"]}>{description}</p>
             </>
           )}
-          <Image alt={name} src={image} className={styles["card-img-top"]} />
+          <Image
+            alt={name}
+            src={image}
+            sizes="(max-width: 767px) 100vw, 33vw"
+            quality="0.5"
+            className={styles["card-img-top"]}
+          />
         </div>
       </div>
       <div className="card-body text-center pt-2 pb-4">

diff --git a/next.config.js b/next.config.js
@@ -9,6 +9,12 @@ const nextConfig = {
   sassOptions: {
     includePaths: [path.join(__dirname, "styles")],
   },
+  images: {
+    // Not a permanent solution - from ChatGPT, trying to address images not loading
+    // see: https://nextjs.org/docs/pages/api-reference/components/image#devicesizes
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+  },
 };
 
 module.exports = nextConfig;