chore: next image

oaknational · Nov 28, 2024 · bbcf89a · bbcf89a
1 parent ac63e4a
commit bbcf89a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/apps/nextjs/next.config.js b/apps/nextjs/next.config.js
@@ -74,7 +74,11 @@ const getConfig = async (phase) => {
     reactStrictMode: true,
     swcMinify: true,
     images: {
-      domains: ["oaknationalacademy-res.cloudinary.com"],
+      domains: [
+        "oaknationalacademy-res.cloudinary.com",
+        "live.staticflickr.com",
+        "images.unsplash.com",
+      ],
     },
     transpilePackages: ["@oakai/api", "@oakai/db", "@oakai/exports"],
     compiler: {

diff --git a/apps/nextjs/src/app/image-spike/[slug]/images.tsx b/apps/nextjs/src/app/image-spike/[slug]/images.tsx
@@ -3,6 +3,7 @@
 import { useCallback, useState } from "react";
 
 import type { Resource } from "ai-apps/image-alt-generation/types";
+import Image from "next/image";
 import Link from "next/link";
 
 import LoadingWheel from "@/components/LoadingWheel";
@@ -287,15 +288,18 @@ const ImagesPage = ({ pageData }: { pageData: PageData }) => {
               {column.imageSearchBatch && (
                 <div className="my-20 grid grid-cols-1 gap-10">
                   {column.imageSearchBatch?.map((image, i) => {
+                    console.log("image", image.url);
                     return (
                       <div
                         key={image.id}
                         className="flex flex-col items-center gap-4"
                       >
-                        <img
+                        <Image
                           src={image.url}
                           alt={image.alt || "Image"}
                           className="w-full"
+                          width={400}
+                          height={400}
                         />
                         <p>License: {image.license}</p>
                         {image.photographer && <p>By: {image.photographer}</p>}