Update LazyImage.js (#178)

Lazy image was returning MEDIUM when ORIGINAL was needed
First-Peoples-Cultural-Council · Oct 26, 2023 · 3f86c78 · 3f86c78
1 parent eef0d25
commit 3f86c78
Showing 1 changed file with 17 additions and 32 deletions.
diff --git a/src/components/LazyImage/LazyImage.js b/src/components/LazyImage/LazyImage.js
@@ -16,38 +16,17 @@ function LazyImage({ alt, imageObject, bgColor, height, width, imgStyling }) {
     }
   }, [])
 
-  let src = ''
-
-  switch (width) {
-    case width <= 100:
-      src = getMediaPath({
-        mediaObject: imageObject,
-        type: IMAGE,
-        size: THUMBNAIL,
-      })
-      break
-    case width > 100 && width <= 560:
-      src = getMediaPath({
-        mediaObject: imageObject,
-        type: IMAGE,
-        size: SMALL,
-      })
-      break
-    case width > 1000:
-      src = getMediaPath({
-        mediaObject: imageObject,
-        type: IMAGE,
-        size: ORIGINAL,
-      })
-      break
-    case width > 560 && width <= 1000:
-    default:
-      src = getMediaPath({
-        mediaObject: imageObject,
-        type: IMAGE,
-        size: MEDIUM,
-      })
-      break
+  const getSize = () => {
+    if (width <= 100) {
+      return THUMBNAIL
+    }
+    if (width <= 560) {
+      return SMALL
+    }
+    if (width <= 1000) {
+      return MEDIUM
+    }
+    return ORIGINAL
   }
 
   const placeholder =
@@ -57,6 +36,12 @@ function LazyImage({ alt, imageObject, bgColor, height, width, imgStyling }) {
 
   const aspectRatio = width / height
 
+  const src = getMediaPath({
+    mediaObject: imageObject,
+    type: IMAGE,
+    size: getSize(),
+  })
+
   return (
     <div className={`relative overflow-hidden ${imgStyling}`}>
       <div style={{ paddingBottom: `${100 / aspectRatio}%` }} />