Fetch og images without CORS to fix pre-rendering bugs

src/image-response/components/ImagePhotoGrid.tsx

@@ -7,6 +7,7 @@ import {
   doAllPhotosHaveOptimizedFiles,
   getOptimizedPhotoUrl,
 } from '@/photo/storage';
+import { fetchBase64ImageFromUrl } from '@/utility/image';
 
 export default async function ImagePhotoGrid({
   photos,
@@ -53,7 +54,24 @@ export default async function ImagePhotoGrid({
 
   const doOptimizedFilesExist = await doAllPhotosHaveOptimizedFiles(photos);
 
-  const renderPhoto = ({ id, url }: Photo, width: number, height: number) =>
+  const photoData = await Promise.all(photos.map(async ({ id, url }) => {
+    const data = await fetchBase64ImageFromUrl(
+      getOptimizedPhotoUrl({
+        imageUrl: url,
+        size: nextImageWidth,
+        addBypassSecret: IS_PREVIEW,
+        compatibilityMode: !doOptimizedFilesExist,
+      }),
+      { mode: 'no-cors' },
+    );
+    return { id, data };
+  }));
+
+  const renderPhoto = (
+    { id, data }: typeof photoData[number],
+    width: number,
+    height: number,
+  ) =>
     <div
       key={id}
       style={{
@@ -65,12 +83,7 @@ export default async function ImagePhotoGrid({
       }}
     >
       <img {...{
-        src: getOptimizedPhotoUrl({
-          imageUrl: url,
-          size: nextImageWidth,
-          addBypassSecret: IS_PREVIEW,
-          compatibilityMode: !doOptimizedFilesExist,
-        }),
+        src: data,
         style: {
           ...imageStyle,
           width: '100%',
@@ -100,7 +113,7 @@ export default async function ImagePhotoGrid({
             width: cellWidth,
             height: cellHeight * 2,
           }}>
-            {renderPhoto(photos[0], cellWidth, cellHeight * 2)}
+            {renderPhoto(photoData[0], cellWidth, cellHeight * 2)}
           </div>
           {/* Small images (R) */}
           <div style={{
@@ -109,12 +122,12 @@ export default async function ImagePhotoGrid({
             width: cellWidth,
             height: cellHeight,
           }}>
-            {photos.slice(1).map(photo =>
+            {photoData.slice(1).map(photo =>
               renderPhoto(photo, cellWidth, cellHeight),
             )}
           </div>
         </>
-        : photos.slice(0, count).map(photo =>
+        : photoData.slice(0, count).map(photo =>
           renderPhoto(photo, cellWidth, cellHeight),
         )}
     </div>

src/utility/image.ts

@@ -1,3 +1,14 @@
 export const removeBase64Prefix = (base64: string) => {
   return base64.match(/^data:image\/[a-z]{3,4};base64,(.+)$/)?.[1] ?? base64;
 };
+
+export const fetchBase64ImageFromUrl = (
+  url: string,
+  fetchOptions?: RequestInit,
+) =>
+  fetch(url, fetchOptions)
+    .then(async response => {
+      const blob = await response.arrayBuffer();
+      // eslint-disable-next-line max-len
+      return `data:${response.headers.get('content-type')};base64,${Buffer.from(blob).toString('base64')}`;
+    });