Add file extension to image path for CF caching

api/images.js

@@ -46,6 +46,10 @@ async function getImage(uuid, size) {
 }
 
 router.get('/:uuid/:size', async (req, res) => {
+  if(req.params.size.includes('.')) {
+    req.params.size = req.params.size.split('.')[0];
+  }
+
   const image = await getImage(req.params.uuid, req.params.size)
 
   const cacheSeconds = 60 * 60 * 24;

components/card/card.js

@@ -23,7 +23,7 @@ export default function Card({item}) {
       <h3><Link href={`/store/item/${item.urlslug}`}><a>{item.name}</a></Link></h3>
       {featuredImage && (
         <div className={styles['card-image']}>
-          <img src={`/api/images/${featuredImage.uuid}/thumb`} />
+          <img src={`/api/images/${featuredImage.uuid}/thumb.png`} />
         </div>
       )}
       <div className={styles['card-text']}>{item.description}</div>

pages/store/item/[slug].js

@@ -39,7 +39,7 @@ export default function Item({item}){
           {item.images && item.images.length > 0 && (
             <div className={styles.imageContainer}>
               <div className={styles.card}>
-                <img src={`/api/images/${item.images[selectedIndex].uuid}/thumb`} />
+                <img src={`/api/images/${item.images[selectedIndex].uuid}/thumb.png`} />
               </div>
               {item.images && item.images.length > 1 &&
                 <div className={styles.imageSelector}>
@@ -47,7 +47,7 @@ export default function Item({item}){
                     <img key={image.uuid}
                       onClick={()=>setSelected(index)}
                       className={index === selectedIndex ? styles.selectedImage : undefined}
-                      src={`/api/images/${image.uuid}/thumb`}
+                      src={`/api/images/${image.uuid}/thumb.png`}
                     />
                   ))}
                 </div>