Merge pull request #27 from abdielou/feature/cache-workaroud

Disable NextImage for some images
abdielou · Aug 23, 2022 · 488d34c · 488d34c · vercel · Aug 23, 2022
2 parents 622ad55 + 3d5e057
commit 488d34c
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 45 deletions.
diff --git a/components/Card.js b/components/Card.js
@@ -1,7 +1,18 @@
 import Image from './Image'
 import Link from './Link'
 
-const Card = ({ title, description, imgSrc, href, width = 1088, height = 612 }) => (
+const OptimizedImage = ({ imageOptimize, ...rest }) =>
+  imageOptimize ? <Image {...rest} /> : <img {...rest} />
+
+const Card = ({
+  title,
+  description,
+  imgSrc,
+  href,
+  width = 1088,
+  height = 612,
+  imageOptimize = true,
+}) => (
   <div className="p-4">
     <div className="h-full overflow-hidden border-2 border-gray-200 rounded-md border-opacity-60 dark:border-gray-700">
       <div className="p-6">
@@ -18,21 +29,23 @@ const Card = ({ title, description, imgSrc, href, width = 1088, height = 612 })
       </div>
       {href ? (
         <Link href={href} aria-label={`Link to ${title}`}>
-          <Image
+          <OptimizedImage
             alt={title}
             src={imgSrc}
             className="object-cover object-center"
             width={width}
             height={height}
+            imageOptimize={imageOptimize}
           />
         </Link>
       ) : (
-        <Image
+        <OptimizedImage
           alt={title}
           src={imgSrc}
           className="object-cover object-center"
           width={width}
           height={height}
+          imageOptimize={imageOptimize}
         />
       )}
     </div>

diff --git a/data/weatherData.js b/data/weatherData.js
@@ -12,6 +12,7 @@ const projectsData = [
     href: 'https://cdn.star.nesdis.noaa.gov/GOES16/ABI/SECTOR/taw/GEOCOLOR/1800x1080.jpg',
     width: '1800',
     height: '1080',
+    imageOptimize: false,
   },
   {
     title: 'Caribe',
@@ -20,6 +21,7 @@ const projectsData = [
     href: 'https://cdn.star.nesdis.noaa.gov//GOES16/ABI/SECTOR/CAR/13/GOES16-CAR-13-1000x1000.gif',
     width: '1000',
     height: '1000',
+    imageOptimize: false,
   },
   {
     title: 'Radar Doppler',
@@ -71,6 +73,7 @@ const projectsData = [
       'https://cdn.star.nesdis.noaa.gov//GOES16/ABI/SECTOR/TAW/GEOCOLOR/GOES16-TAW-GEOCOLOR-900x540.gif',
     width: '900',
     height: '540',
+    imageOptimize: false,
   },
   {
     title: 'Red Sísmica de Puerto Rico',

diff --git a/package-lock.json b/package-lock.json
diff --git a/pages/weather.js b/pages/weather.js
@@ -26,6 +26,7 @@ export default function Projects() {
                   href={d.href}
                   width={adjustedSize.width}
                   height={adjustedSize.height}
+                  imageOptimize={d.imageOptimize}
                 />
               )
             })}