Build-time thumbnail files generationnextjs

2 files changed, 4 insertions, 5 deletions

diff --git a/components/Map/Map.tsx b/components/Map/Map.tsx
index 44f8ea6..8ecde47 100644
--- a/components/Map/Map.tsx
+++ b/components/Map/Map.tsx
@@ -55,7 +55,7 @@ export default function Map({ trip, handleMarkerClick }: Props): JSX.Element {
                   <>
                     <img
                       style={{ width: 36, height: 36 }}
-                      src={`data:image/jpg;base64,${cluster[0].thumbnail}`}
+                      src={cluster[0].thumbnail}
                       alt=""
                     />
                     <span className={styles.markerItemCount}>{markerCluster.getChildCount()}</span>
@@ -77,7 +77,7 @@ export default function Map({ trip, handleMarkerClick }: Props): JSX.Element {
           position={[photo.latitude, photo.longitude]}
           icon={
             new Icon({
-              iconUrl: `data:image/jpg;base64,${photo.thumbnail}`,
+              iconUrl: photo.thumbnail,
               iconSize: [36, 36],
               className: styles.markerIcon,
             })
diff --git a/lib/trips.ts b/lib/trips.ts
index 421b864..40a71a4 100644
--- a/lib/trips.ts
+++ b/lib/trips.ts
@@ -21,7 +21,6 @@ function getPhotoMetadata(filePath: string) {
     latitude: tags.gps.Latitude,
     longitude: tags.gps.Longitude,
     time: tags.exif.DateTime.description.replace(':', '-').replace(':', '-'),
-    thumbnail: tags.Thumbnail.base64,
   };
 }
 
@@ -93,10 +92,10 @@ export default function getTripsData(): Trip[] {
     const photoFiles = files.filter((f) => f.endsWith('.jpg'));
     const photos: Photo[] = photoFiles.map((p) => {
       // eslint-disable-next-line global-require, import/no-dynamic-require, @typescript-eslint/no-var-requires
-      const { src } = require(`trips/${dir}/${p}`);
       return {
         name: _.kebabCase(p),
-        src,
+        src: require(`trips/${dir}/${p}`).src,
+        thumbnail: require(`trips/${dir}/${p}?resize&sizes[]=36`).src,
         ...getPhotoMetadata(path.join(dirPath, p)),
       };
     });