this change is from the future

(just testing out the WIP image CDN with mpcautofill.github.io)

frontend/.env.dist

@@ -1 +1,2 @@
 NEXT_PUBLIC_BACKEND_URL=
+NEXT_PUBLIC_IMAGE_CDN_URL=

frontend/src/features/card/card.tsx

@@ -115,11 +115,21 @@ function CardImage({
 
   //# region computed constants
 
+  // TODO: always point at image server once it's stable
+  const imageCDNURL = process.env.NEXT_PUBLIC_IMAGE_CDN_URL;
+  const smallThumbnailURL =
+    imageCDNURL != null
+      ? `${imageCDNURL}/images/google_drive/small/${maybeCardDocument?.identifier}.jpg`
+      : maybeCardDocument?.small_thumbnail_url;
+  const mediumThumbnailURL =
+    imageCDNURL != null
+      ? `${imageCDNURL}/images/google_drive/large/${maybeCardDocument?.identifier}.jpg`
+      : maybeCardDocument?.medium_thumbnail_url;
   const imageSrc: string | undefined =
     imageState !== "errored"
       ? small
-        ? maybeCardDocument?.small_thumbnail_url
-        : maybeCardDocument?.medium_thumbnail_url
+        ? smallThumbnailURL
+        : mediumThumbnailURL
       : small
       ? "/error_404.png"
       : "/error_404_med.png";

frontend/src/pages/index.tsx

@@ -120,6 +120,21 @@ export default function Index() {
         />
       </Head>
       <br />
+      {process.env.NEXT_PUBLIC_IMAGE_CDN_URL != null && (
+        <Alert variant="info">
+          Howdy! I&apos;m testing an experimental feature for image loading at
+          the moment.
+          <br />
+          If you noticed any issues, please create an issue on{" "}
+          <a
+            href="https://github.com/chilli-axe/mpc-autofill/issues"
+            target="_blank"
+          >
+            the GitHub repo
+          </a>
+          . Thanks for your patience!
+        </Alert>
+      )}
       <DynamicLogo />
       <br />
       <JumpIntoEditorButton />