[UXIT-1731] Validate Image Src

src/app/(homepage)/components/FeaturedBlogPosts.tsx

@@ -46,7 +46,7 @@ export function FeaturedBlogPosts() {
                 text: 'Learn More',
               }}
               image={{
-                ...(image || graphicsData.imageFallback.data),
+                ...image,
                 alt: '',
                 objectFit: 'cover',
                 sizes: buildImageSizeProp({

src/app/(homepage)/components/FeaturedEcosystemProjects.tsx

@@ -37,7 +37,7 @@ export function FeaturedEcosystemProjects({
             icon: MagnifyingGlass,
           }}
           image={{
-            ...(image || graphicsData.imageFallback.data),
+            ...image,
             alt: '',
             objectFit: 'contain',
             padding: Boolean(image),

src/app/_components/ArticleHeader.tsx

@@ -1,13 +1,10 @@
-import Image from 'next/image'
-
-import type { ImageProps } from '@/types/imageType'
-
 import { buildImageSizeProp } from '@/utils/buildImageSizeProp'
 
 import { type HeadingProps, Heading } from '@/components/Heading'
+import { SmartImage, type SmartImageProps } from '@/components/SmartImage'
 
 type ArticleHeaderProps = {
-  image: ImageProps
+  image: SmartImageProps
   children?: React.ReactNode
 }
 
@@ -20,7 +17,7 @@ export function ArticleHeader({ image, children }: ArticleHeaderProps) {
     <header className="space-y-6">
       <div className="space-y-6">{children}</div>
       <div className="relative aspect-video">
-        <Image
+        <SmartImage
           fill
           priority
           quality={100}

src/app/_components/Card.tsx

@@ -1,11 +1,10 @@
-import Image, { type ImageProps } from 'next/image'
+import Image, { type StaticImageData } from 'next/image'
 
 import { ArrowUpRight } from '@phosphor-icons/react/dist/ssr'
 import { clsx } from 'clsx'
 import theme from 'tailwindcss/defaultTheme'
 
 import { type CTAProps } from '@/types/ctaType'
-import type { ImageObjectFit, StaticImageProps } from '@/types/imageType'
 
 import { buildImageSizeProp } from '@/utils/buildImageSizeProp'
 import { isExternalLink } from '@/utils/linkUtils'
@@ -15,25 +14,19 @@ import { BaseLink } from '@/components/BaseLink'
 import { Heading } from '@/components/Heading'
 import { Icon } from '@/components/Icon'
 import { Meta, type MetaDataType } from '@/components/Meta'
+import { SmartImage, type SmartImageProps } from '@/components/SmartImage'
 import {
   type TagGroupProps,
   TagGroup,
 } from '@/components/TagComponents/TagGroup'
 
-type CardImageProps = (StaticImageProps | ImageProps) & {
-  objectFit?: ImageObjectFit
-  padding?: boolean
-  priority?: boolean
-  sizes?: string
-}
-
 type CardProps = {
   title: string | React.ReactNode
   tags?: TagGroupProps['tags']
   metaData?: MetaDataType
   description?: string
   cta?: CTAPropsWithSpacing
-  image?: CardImageProps
+  image?: SmartImageProps
   borderColor?: 'brand-300' | 'brand-400' | 'brand-500' | 'brand-600'
   textIsClamped?: boolean
   as?: React.ElementType
@@ -102,7 +95,7 @@ Card.Image = function ImageComponent({
   const isStaticImage = 'data' in image
 
   const commonProps = {
-    alt: image.alt,
+    alt: image.alt || '',
     priority: image.priority,
     quality: 100,
     sizes:
@@ -120,15 +113,15 @@ Card.Image = function ImageComponent({
       <Image
         {...commonProps}
         className={clsx(commonProps.className, 'aspect-video')}
-        src={image.data}
+        src={image.data as StaticImageData}
         alt={commonProps.alt}
       />
     )
   }
 
   return (
     <div className="relative aspect-video">
-      <Image
+      <SmartImage
         fill
         {...commonProps}
         className={clsx(commonProps.className, 'h-full w-full')}

src/app/_components/PageHeader.tsx

@@ -1,9 +1,7 @@
-import Image, { type ImageProps } from 'next/image'
+import Image, { type StaticImageData } from 'next/image'
 
 import { clsx } from 'clsx'
 
-import type { ImageObjectFit, StaticImageProps } from '@/types/imageType'
-
 import { buildImageSizeProp } from '@/utils/buildImageSizeProp'
 
 import {
@@ -17,18 +15,15 @@ import {
 import { Heading } from '@/components/Heading'
 import { Meta, type MetaDataType } from '@/components/Meta'
 import { SectionDivider } from '@/components/SectionDivider'
+import { SmartImage, type SmartImageProps } from '@/components/SmartImage'
 
 type TitleProps = {
   children: string
 }
 
-type PageHeaderImageProps = (StaticImageProps | ImageProps) & {
-  objectFit?: ImageObjectFit
-}
-
 type PageHeaderProps = {
   title: TitleProps['children']
-  image: PageHeaderImageProps
+  image: SmartImageProps
   isFeatured?: boolean
   metaData?: MetaDataType
   description?: DescriptionTextType
@@ -77,7 +72,7 @@ PageHeader.Image = function PageHeaderImage({
   const isStaticImage = 'data' in image
 
   const commonProps = {
-    alt: image.alt,
+    alt: image.alt || '',
     priority: true,
     quality: 100,
     sizes: buildImageSizeProp({ startSize: '100vw', lg: '490px' }),
@@ -93,15 +88,15 @@ PageHeader.Image = function PageHeaderImage({
       <Image
         {...commonProps}
         className={clsx(commonProps.className, 'aspect-video')}
-        src={image.data}
+        src={image.data as StaticImageData}
         alt={commonProps.alt}
       />
     )
   }
 
   return (
     <div className="relative aspect-video">
-      <Image
+      <SmartImage
         fill
         {...commonProps}
         className={clsx(commonProps.className, 'h-full w-full')}

src/app/_components/SmartImage.tsx

@@ -0,0 +1,70 @@
+'use server'
+
+import fs from 'fs/promises'
+import path from 'path'
+
+import Image, { type ImageProps } from 'next/image'
+
+import type { ImageObjectFit, StaticImageProps } from '@/types/imageType'
+
+import { graphicsData } from '@/data/graphicsData'
+
+const { data: fallbackSrc, alt: fallbackAlt } = graphicsData.imageFallback
+
+export type SmartImageProps = {
+  src?: string | StaticImageProps['data']
+  alt?: string
+  className?: string
+  objectFit?: ImageObjectFit
+  padding?: boolean
+} & Omit<ImageProps, 'src' | 'alt' | 'className'>
+
+export async function SmartImage({ src, alt = '', ...props }: SmartImageProps) {
+  const imageSrc = await getImageSrc(src)
+
+  const imageExists = imageSrc !== fallbackSrc
+
+  return (
+    <Image src={imageSrc} alt={imageExists ? alt : fallbackAlt} {...props} />
+  )
+}
+
+async function getImageSrc(src: SmartImageProps['src']) {
+  if (!src) {
+    return fallbackSrc
+  }
+  const isAssetImage = typeof src === 'string' && src.startsWith('/assets')
+  const isRemoteImage =
+    typeof src === 'string' && (src.startsWith('http') || src.startsWith('//'))
+
+  if (isAssetImage) {
+    const assetExists = await checkAssetImageExists(src)
+    return assetExists ? src : fallbackSrc
+  }
+
+  if (isRemoteImage) {
+    const remoteImageExists = await checkRemoteImageExists(src)
+    return remoteImageExists ? src : fallbackSrc
+  }
+
+  return src
+}
+
+async function checkRemoteImageExists(url: string) {
+  try {
+    const response = await fetch(url, { method: 'HEAD' })
+    return response.ok
+  } catch {
+    return false
+  }
+}
+
+async function checkAssetImageExists(src: string) {
+  const publicPath = path.join(process.cwd(), 'public', src)
+  try {
+    await fs.access(publicPath, fs.constants.F_OK)
+    return true
+  } catch {
+    return false
+  }
+}

src/app/about/page.tsx

@@ -120,7 +120,7 @@ export default function About() {
                   description={description}
                   image={
                     image && {
-                      ...(image || graphicsData.imageFallback.data),
+                      ...image,
                       alt: '',
                       sizes: buildImageSizeProp({
                         startSize: '100vw',

src/app/blog/[slug]/components/BlogPostHeader.tsx

@@ -22,7 +22,7 @@ export function BlogPostHeader({
   return (
     <ArticleHeader
       image={{
-        src: image?.src || graphicsData.imageFallback.data.src,
+        src: image?.src,
         alt: '',
       }}
     >

src/app/blog/page.tsx

@@ -117,7 +117,7 @@ export default function Blog({ searchParams }: Props) {
         description={featuredPost.description}
         metaData={getMetaData(featuredPost.publishedOn)}
         image={{
-          ...(featuredPost.image || graphicsData.imageFallback.data),
+          ...featuredPost.image,
           alt: '',
           objectFit: 'cover',
         }}
@@ -200,7 +200,7 @@ export default function Blog({ searchParams }: Props) {
                             icon: BookOpen,
                           }}
                           image={{
-                            ...(image || graphicsData.imageFallback.data),
+                            ...image,
                             alt: '',
                             priority: isFirstTwoImages,
                             objectFit: 'cover',

src/app/digest/[slug]/components/DigestArticleHeader.tsx

@@ -1,5 +1,3 @@
-import { graphicsData } from '@/data/graphicsData'
-
 import { ArticleHeader } from '@/components/ArticleHeader'
 import { AvatarGroup } from '@/components/AvatarGroup'
 import { TagGroup } from '@/components/TagComponents/TagGroup'
@@ -21,7 +19,7 @@ export function DigestArticleHeader({
   return (
     <ArticleHeader
       image={{
-        src: image?.src || graphicsData.imageFallback.data.src,
+        src: image?.src,
         alt: '',
       }}
     >

src/app/digest/page.tsx

@@ -84,7 +84,7 @@ export default function Digest() {
                   icon: BookOpen,
                 }}
                 image={{
-                  ...(image || graphicsData.imageFallback.data),
+                  ...image,
                   alt: image?.alt || '',
                   sizes: buildImageSizeProp({
                     startSize: '100vw',

src/app/ecosystem-explorer/[slug]/components/PageHeader.tsx

@@ -1,27 +1,21 @@
-import Image, { type ImageProps } from 'next/image'
-
 import { clsx } from 'clsx'
 
-import { graphicsData } from '@/data/graphicsData'
-
 import { buildImageSizeProp } from '@/utils/buildImageSizeProp'
 
-type ImagePropsWithOptionalAlt = Omit<ImageProps, 'alt'> & {
-  alt?: string
-}
+import { SmartImage, type SmartImageProps } from '@/components/SmartImage'
 
 type PageHeaderProps = {
-  image?: ImagePropsWithOptionalAlt
+  image?: SmartImageProps
 }
 
 export function PageHeader({ image }: PageHeaderProps) {
   return (
     <header className="space-y-10 md:space-y-16">
       <div className="relative h-48 md:w-3/4 lg:w-2/3 xl:w-3/5">
-        <Image
+        <SmartImage
           fill
           priority
-          src={image?.src || graphicsData.imageFallback.data.src}
+          src={image?.src}
           alt={''}
           className={clsx(
             image?.src && 'rounded-lg',

src/app/ecosystem-explorer/page.tsx

@@ -181,7 +181,7 @@ export default function EcosystemExplorer({ searchParams }: Props) {
                             icon: BookOpen,
                           }}
                           image={{
-                            ...(image || graphicsData.imageFallback.data),
+                            ...image,
                             alt: '',
                             objectFit: 'contain',
                             padding: Boolean(image),

src/app/events/[slug]/page.tsx

@@ -114,7 +114,7 @@ export default function EventEntry({ params }: EventProps) {
             eventHasConcluded,
           })}
           image={{
-            ...(image || graphicsData.imageFallback.data),
+            ...image,
             alt: '',
             objectFit: 'cover',
           }}

src/app/events/page.tsx

@@ -136,7 +136,7 @@ export default function Events({ searchParams }: Props) {
           location: featuredEvent.location.primary,
         })}
         image={{
-          ...(featuredEvent.image || graphicsData.imageFallback.data),
+          ...featuredEvent.image,
           alt: '',
           objectFit: 'cover',
         }}
@@ -210,7 +210,7 @@ export default function Events({ searchParams }: Props) {
                             location: location.primary,
                           })}
                           image={{
-                            ...(image || graphicsData.imageFallback.data),
+                            ...image,
                             alt: '',
                             priority: isFirstTwoImages,
                             objectFit: 'cover',

src/app/grants/components/FeaturedGrantGraduates.tsx

@@ -32,7 +32,7 @@ export function FeaturedGrantGraduates({
             icon: BookOpen,
           }}
           image={{
-            ...(image || graphicsData.imageFallback.data),
+            ...image,
             alt: '',
             objectFit: 'contain',
             padding: Boolean(image),