From bd01bf6b97203f0ec812845fb8276d0e27f5b33d Mon Sep 17 00:00:00 2001
From: Jango <me.jango@protonmail.com>
Date: Wed, 26 Aug 2026 23:13:45 -0300
Subject: [PATCH] Fall back to the no-cover header when a project's cover image
 can't load

Cover images pinned through IPFS services that no longer exist render as a
broken image in a tall empty band. Treat a cover that fails to load as no
cover, so the header collapses to its plain layout.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/Project/ProjectHeader/CoverPhoto.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Project/ProjectHeader/CoverPhoto.tsx b/src/components/Project/ProjectHeader/CoverPhoto.tsx
index 03bb834431..fdc7ca0ffa 100644
--- a/src/components/Project/ProjectHeader/CoverPhoto.tsx
+++ b/src/components/Project/ProjectHeader/CoverPhoto.tsx
@@ -1,13 +1,16 @@
 // import { useProjectMetadataContext } from 'contexts/ProjectMetadataContext'
 import Image from "next/image"
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { useCoverPhoto } from './hooks/useCoverPhoto'
 
 export const CoverPhoto = () => {
   const { coverImageUrl, coverImageAltText } = useCoverPhoto()
   // const { projectId } = useProjectMetadataContext()
-  const hasCoverImage = !!coverImageUrl
+  // A cover whose IPFS content no longer resolves renders as a broken image
+  // in a tall empty band; treat it as no cover once it fails to load.
+  const [failedUrl, setFailedUrl] = useState<string>()
+  const hasCoverImage = !!coverImageUrl && coverImageUrl !== failedUrl
 
   const applyDarkerCoverPhoto = useMemo(() => {
     // This is used for countdown projects only; Since it is disabled, we don't need to apply darker cover photo for now
@@ -22,7 +25,7 @@ export const CoverPhoto = () => {
         hasCoverImage ? 'h-70 bg-split-200 dark:bg-slate-600' : 'h-[168px]',
       )}
     >
-      {coverImageUrl && (
+      {hasCoverImage && (
         <>
           <Image
             fill
@@ -33,6 +36,7 @@ export const CoverPhoto = () => {
             )}
             crossOrigin="anonymous"
             alt={coverImageAltText}
+            onError={() => setFailedUrl(coverImageUrl)}
           />
           {applyDarkerCoverPhoto && (
             <div className="absolute h-70 w-full bg-black opacity-30 drop-shadow" />