diff --git a/app/src/components/exploreFurther/exploreFurther.tsx b/app/src/components/exploreFurther/exploreFurther.tsx index a1e98cc8..8e6c831d 100644 --- a/app/src/components/exploreFurther/exploreFurther.tsx +++ b/app/src/components/exploreFurther/exploreFurther.tsx @@ -10,7 +10,6 @@ import { import { ExploreFurtherDataType } from "../../types/ExploreFurtherDataType"; import exploreFurtherData from "../../data/exploreFurtherData"; import { headerBreakpoints } from "../../utils/breakpoints"; -import Image from "next/image"; const ExploreFurther = () => { const data: ExploreFurtherDataType[] = exploreFurtherData; @@ -49,18 +48,13 @@ const ExploreFurther = () => { data-testid={`test-id-${index}`} mainActionLink={item.url} imageProps={{ - component: ( - {""} - ), + alt: "", + aspectRatio: "sixteenByNine", + component: undefined, isAtEnd: false, + isLazy: true, + size: "default", + src: item.imageSrc, }} layout="row" sx={{ diff --git a/app/src/data/exploreFurtherData.ts b/app/src/data/exploreFurtherData.ts index 145be004..a8331ce1 100644 --- a/app/src/data/exploreFurtherData.ts +++ b/app/src/data/exploreFurtherData.ts @@ -13,6 +13,7 @@ const exploreFurtherData: ExploreFurtherDataType[] = [ url: "http://nypl.artehouse.com/perl/home.pl", image: serviceArtehouse, imgAlt: "Service Artehouse", + imageSrc: "/service-artehouse.jpg", }, { title: "NYPL Archives and Manuscripts", @@ -21,6 +22,7 @@ const exploreFurtherData: ExploreFurtherDataType[] = [ url: "http://archives.nypl.org/", image: serviceArchives, imgAlt: "Service Archives", + imageSrc: "/service-archives.jpg", }, { title: "NYPL Research Catalog", @@ -29,6 +31,7 @@ const exploreFurtherData: ExploreFurtherDataType[] = [ url: "https://www.nypl.org/research/research-catalog/ ", image: researchCatalog, imgAlt: "NYPL Research Catalog", + imageSrc: "/ResearchCatalogThumbnail_v2.jpg", }, { title: "NYPL Digital Collections API", @@ -37,6 +40,7 @@ const exploreFurtherData: ExploreFurtherDataType[] = [ url: "https://api.repo.nypl.org/", image: serviceApi, imgAlt: "Service API", + imageSrc: "/service-api.jpg", }, { title: "Digital Public Library of America", @@ -45,6 +49,7 @@ const exploreFurtherData: ExploreFurtherDataType[] = [ url: "http://dp.la/", image: serviceDpla, imgAlt: "Service Digital Public Library", + imageSrc: "/service-dpla.jpg", }, ]; diff --git a/app/src/types/ExploreFurtherDataType.ts b/app/src/types/ExploreFurtherDataType.ts index 4b496a5c..a9a4fef8 100644 --- a/app/src/types/ExploreFurtherDataType.ts +++ b/app/src/types/ExploreFurtherDataType.ts @@ -5,4 +5,5 @@ export interface ExploreFurtherDataType { description: string; imgAlt: string; image: StaticImageData; + imageSrc: string; }