missions carrousse

app/missions/page.tsx

@@ -96,7 +96,7 @@ export default function MissionsPage() {
     return {
       number: oddNumber,
       label: oddNumber ? `ODD ${oddNumber}` : "Non catégorisé",
-      iconPath: oddNumber ? `/images/odd/odd-${oddNumber}.png` : "/images/odd/default.png"
+      iconPath: oddNumber ? `/F SDG Icons 2019 WEB/F-WEB-Goal-${oddNumber.padStart(2, '0')}.png` : ""
     };
   };
 
@@ -198,12 +198,23 @@ export default function MissionsPage() {
                             src={mission.logo} 
                             alt={mission.name}
                             className="w-full h-full object-cover rounded-md border border-gray-200"
+                            onError={(e) => {
+                              console.log("Logo failed to load:", mission.logo);
+                              // If the image fails to load, show the fallback
+                              (e.currentTarget as HTMLImageElement).style.display = 'none';
+                              // Show the fallback div
+                              const fallbackDiv = e.currentTarget.parentElement?.querySelector('.logo-fallback');
+                              if (fallbackDiv) {
+                                (fallbackDiv as HTMLElement).style.display = 'flex';
+                              }
+                            }}
                           />
-                        ) : (
+                        ) : null}
-                          <div className="w-full h-full flex items-center justify-center bg-gray-100 rounded-md border border-gray-200 text-gray-400">
+                        <div 
-                            {mission.name.slice(0, 2).toUpperCase()}
+                          className={`logo-fallback w-full h-full flex items-center justify-center bg-gray-100 rounded-md border border-gray-200 text-gray-400 ${mission.logo ? 'hidden' : ''}`}
-                          </div>
+                        >
-                        )}
+                          {mission.name.slice(0, 2).toUpperCase()}
+                        </div>
                       </div>
                       <div className="flex-1">
                         <div className="flex items-center gap-2 mb-2">