From 8f2a45a477e58dac5f12ff9b03f45f0aa2258f48 Mon Sep 17 00:00:00 2001
From: mukeshs <mukesh@rootxwire.com>
Date: Fri, 21 Nov 2025 09:46:33 +0530
Subject: [PATCH] past image resolved

---
 .../education/EducationTraining.tsx           | 20 +++--
 src/components/events/EventDetail.tsx         | 68 +++++++--------
 .../events/MedicalEventsComponent.tsx         | 84 ++++++++++---------
 src/components/home/EventSection.tsx          | 58 +++++++++----
 4 files changed, 132 insertions(+), 98 deletions(-)

diff --git a/src/components/education/EducationTraining.tsx b/src/components/education/EducationTraining.tsx
index 8673682..5035a43 100644
--- a/src/components/education/EducationTraining.tsx
+++ b/src/components/education/EducationTraining.tsx
@@ -1,6 +1,5 @@
 'use client';
 import { useState, useEffect } from 'react';
-import Image from 'next/image';
 import Link from 'next/link';
 import { 
   ChevronRight, 
@@ -401,14 +400,19 @@ const AcademicResearch: React.FC = () => {
                       href={`/education-training/course-detail?id=${course.id}`}
                       className="group bg-white rounded-lg overflow-hidden border border-gray-300 hover:shadow-xl transition-all duration-300 flex flex-col h-full cursor-pointer"
                     >
-                      {/* Image - FIXED */}
+                      {/* Image - no fallback */}
                       <div className="relative h-48 w-full overflow-hidden flex-shrink-0">
-                        <Image
-                          src={course.image}
-                          alt={course.title}
-                          fill
-                          className="object-cover transition-transform duration-300 group-hover:scale-105"
-                        />
+                        {course.image && course.image.trim() !== '' ? (
+                          <img
+                            src={course.image}
+                            alt={course.title}
+                            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+                          />
+                        ) : (
+                          <div className="w-full h-full bg-gray-200 flex items-center justify-center">
+                            <span className="text-gray-400">No image available</span>
+                          </div>
+                        )}
                       </div>
 
                       {/* Content */}
diff --git a/src/components/events/EventDetail.tsx b/src/components/events/EventDetail.tsx
index 40e9388..ff84151 100644
--- a/src/components/events/EventDetail.tsx
+++ b/src/components/events/EventDetail.tsx
@@ -165,30 +165,18 @@ const EventDetail = () => {
     };
   };
 
-  const getSafeImageUrl = (imageUrl: string | undefined, fallback: string) => {
-    return imageUrl && imageUrl.trim() !== '' ? imageUrl : fallback;
+  // Get safe image URL - no fallback
+  const getSafeImageUrl = (imageUrl: string | undefined): string => {
+    return imageUrl && imageUrl.trim() !== '' ? imageUrl : '';
   };
 
-  const getGalleryImages = (galleryImages: string[] | undefined) => {
-    const fallbackImages = [
-      'https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=400&h=200&fit=crop',
-      'https://images.unsplash.com/photo-1582750433449-648ed127bb54?w=400&h=200&fit=crop'
-    ];
-    
+  const getGalleryImages = (galleryImages: string[] | undefined): string[] => {
     if (!galleryImages || galleryImages.length === 0) {
-      return fallbackImages;
+      return [];
     }
     
-    const validImages = galleryImages.filter(img => img && img.trim() !== '');
-    if (validImages.length === 0) {
-      return fallbackImages;
-    }
-    
-    while (validImages.length < 2) {
-      validImages.push(fallbackImages[validImages.length % fallbackImages.length]);
-    }
-    
-    return validImages.slice(0, 2);
+    // Only return valid images, no fallbacks
+    return galleryImages.filter(img => img && img.trim() !== '');
   };
 
   const getFormattedDescription = (event: Event) => {
@@ -298,7 +286,7 @@ const EventDetail = () => {
   const venue = getPrimaryVenue(eventData);
   const description = getFormattedDescription(eventData);
   const galleryImages = getGalleryImages(eventData.galleryImages);
-  const mainImage = getSafeImageUrl(eventData.mainImage, 'https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=800&h=400&fit=crop');
+  const mainImage = getSafeImageUrl(eventData.mainImage);
 
   return (
     <div className="min-h-screen" style={{ backgroundColor: '#f4f4f4' }}>
@@ -335,28 +323,36 @@ const EventDetail = () => {
 
       <div className="py-6">
         <div className="max-w-7xl mx-auto px-4">
-          {/* Image Section - FIXED */}
+          {/* Image Section - No fallbacks */}
           <div className="bg-white shadow-lg rounded-lg overflow-hidden mb-6">
             <div className="relative">
               <div className="grid grid-cols-1 md:grid-cols-3 gap-1">
                 <div className="md:col-span-2 relative overflow-hidden h-64 md:h-96">
-                  <img
-                    src={mainImage}
-                    alt={eventData.title}
-                    className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
-                  />
-                </div>
-                <div className="hidden md:flex md:flex-col gap-1">
-                  {galleryImages.map((image, index) => (
-                    <div key={index} className="relative overflow-hidden flex-1 min-h-0">
-                      <img
-                        src={image}
-                        alt={`Gallery ${index + 1}`}
-                        className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
-                      />
+                  {mainImage ? (
+                    <img
+                      src={mainImage}
+                      alt={eventData.title}
+                      className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
+                    />
+                  ) : (
+                    <div className="w-full h-full bg-gray-200 flex items-center justify-center">
+                      <span className="text-gray-400">No image available</span>
                     </div>
-                  ))}
+                  )}
                 </div>
+                {galleryImages.length > 0 && (
+                  <div className="hidden md:flex md:flex-col gap-1">
+                    {galleryImages.map((image, index) => (
+                      <div key={index} className="relative overflow-hidden flex-1 min-h-0">
+                        <img
+                          src={image}
+                          alt={`Gallery ${index + 1}`}
+                          className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
+                        />
+                      </div>
+                    ))}
+                  </div>
+                )}
               </div>
             </div>
           </div>
diff --git a/src/components/events/MedicalEventsComponent.tsx b/src/components/events/MedicalEventsComponent.tsx
index 249bbd3..9f942e5 100644
--- a/src/components/events/MedicalEventsComponent.tsx
+++ b/src/components/events/MedicalEventsComponent.tsx
@@ -129,38 +129,28 @@ const MedicalEventsComponent = () => {
     }
   };
 
-  // Get safe image URL with fallback
-  const getSafeImageUrl = (imageUrl: string | undefined, fallback: string) => {
-    return imageUrl && imageUrl.trim() !== '' ? imageUrl : fallback;
+  // Get safe image URL - no fallback, return empty string if no image
+  const getSafeImageUrl = (imageUrl: string | undefined): string => {
+    if (!imageUrl || imageUrl.trim() === '') {
+      return '';
+    }
+    return imageUrl;
   };
 
-  // Get gallery images with fallbacks - only for events, not training programs
-  const getGalleryImages = (item: DisplayItem) => {
-    const fallbackImages = [
-      'https://images.unsplash.com/photo-1551601651-2a8555f1a136?w=200&h=100&fit=crop',
-      'https://images.unsplash.com/photo-1582750433449-648ed127bb54?w=200&h=100&fit=crop',
-      'https://images.unsplash.com/photo-1638202993928-7267aad84c31?w=200&h=100&fit=crop',
-      'https://images.unsplash.com/photo-1551601651-2a8555f1a136?w=200&h=100&fit=crop'
-    ];
-    
+  // Get gallery images - no fallbacks, only return valid images
+  const getGalleryImages = (item: DisplayItem): string[] => {
     if (item.type === 'training') {
-      // Training programs don't have gallery images
       return [];
     }
     
     const galleryImages = item.galleryImages;
     
     if (!galleryImages || galleryImages.length === 0) {
-      return fallbackImages;
+      return [];
     }
     
-    // Fill missing images with fallbacks
-    const validImages = galleryImages.filter(img => img && img.trim() !== '');
-    while (validImages.length < 4 && validImages.length < fallbackImages.length) {
-      validImages.push(fallbackImages[validImages.length]);
-    }
-    
-    return validImages.slice(0, 4);
+    // Only return valid images, no fallbacks
+    return galleryImages.filter(img => img && img.trim() !== '');
   };
 
   if (loading) {
@@ -264,11 +254,17 @@ const MedicalEventsComponent = () => {
                 onClick={() => navigateToDetail(nextItem)}
               >
                 <div className="relative h-48 md:h-64">
-                  <img 
-                    src={getSafeImageUrl(nextItem.mainImage, "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=800&h=300&fit=crop")} 
-                    alt={nextItem.title}
-                    className="w-full h-full object-cover"
-                  />
+                  {getSafeImageUrl(nextItem.mainImage) ? (
+                    <img 
+                      src={getSafeImageUrl(nextItem.mainImage)} 
+                      alt={nextItem.title}
+                      className="w-full h-full object-cover"
+                    />
+                  ) : (
+                    <div className="w-full h-full bg-gray-200 flex items-center justify-center">
+                      <span className="text-gray-400 text-sm">No image available</span>
+                    </div>
+                  )}
                   {/* Type Badge */}
                   <div className="absolute top-4 right-4">
                     <span 
@@ -402,11 +398,17 @@ const MedicalEventsComponent = () => {
                           <div className="flex flex-col sm:flex-row gap-1 w-full md:w-auto">
                             {/* Main image - FIXED HEIGHT */}
                             <div className="w-full sm:w-48 h-32 md:h-32 flex-shrink-0 rounded-sm overflow-hidden relative">
-                              <img 
-                                src={getSafeImageUrl(item.mainImage, "https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=400&h=200&fit=crop")}
-                                alt={item.title}
-                                className="w-full h-full object-cover"
-                              />
+                              {getSafeImageUrl(item.mainImage) ? (
+                                <img 
+                                  src={getSafeImageUrl(item.mainImage)}
+                                  alt={item.title}
+                                  className="w-full h-full object-cover"
+                                />
+                              ) : (
+                                <div className="w-full h-full bg-gray-200 flex items-center justify-center">
+                                  <span className="text-gray-400 text-xs">No image</span>
+                                </div>
+                              )}
                               {/* Type Badge */}
                               <div className="absolute top-2 right-2">
                                 <span 
@@ -421,8 +423,8 @@ const MedicalEventsComponent = () => {
                               </div>
                             </div>
                             
-                            {/* Gallery grid - only for events - FIXED HEIGHT */}
-                            {showGallery && (
+                            {/* Gallery grid - only for events, only if images exist */}
+                            {showGallery && galleryImages.length > 0 && (
                               <div className="grid grid-cols-2 gap-1 w-full sm:w-60 h-32 md:h-32">
                                 {galleryImages.map((img, index) => (
                                   <div key={index} className="rounded-sm overflow-hidden">
@@ -491,11 +493,17 @@ const MedicalEventsComponent = () => {
                       onClick={() => router.push(`/event-detail/${event.id}`)}
                     >
                       <div className="w-full h-32 lg:h-28 mb-3 overflow-hidden rounded-sm">
-                        <img 
-                          src={getSafeImageUrl(event.mainImage, "https://images.unsplash.com/photo-1551601651-2a8555f1a136?w=300&h=200&fit=crop")} 
-                          alt={event.title}
-                          className="w-full h-full object-cover"
-                        />
+                        {getSafeImageUrl(event.mainImage) ? (
+                          <img 
+                            src={getSafeImageUrl(event.mainImage)} 
+                            alt={event.title}
+                            className="w-full h-full object-cover"
+                          />
+                        ) : (
+                          <div className="w-full h-full bg-gray-200 flex items-center justify-center">
+                            <span className="text-gray-400 text-xs">No image</span>
+                          </div>
+                        )}
                       </div>
                       <div className="text-sm">
                         <div className="mb-1 font-medium text-xs" style={{ color: '#e64838' }}>
diff --git a/src/components/home/EventSection.tsx b/src/components/home/EventSection.tsx
index 66a34c3..cc4508c 100644
--- a/src/components/home/EventSection.tsx
+++ b/src/components/home/EventSection.tsx
@@ -60,6 +60,14 @@ const EventsSection = () => {
     }
   };
 
+  // Get safe image URL - no fallback
+  const getSafeImageUrl = (item: EventOrCourse): string => {
+    if (!item.mainImage || item.mainImage.trim() === '') {
+      return '';
+    }
+    return item.mainImage;
+  };
+
   // Navigation functions
   const navigateToDetail = (item: EventOrCourse) => {
     if (item.type === 'event') {
@@ -144,11 +152,17 @@ const EventsSection = () => {
               } ${index === 3 ? 'md:col-span-2 lg:col-span-1' : ''}`}
               onClick={() => navigateToDetail(item)}
             >
-              <img 
-                src={item.mainImage}
-                alt={getTitle(item)}
-                className="w-full h-full object-cover"
-              />
+              {getSafeImageUrl(item) ? (
+                <img 
+                  src={getSafeImageUrl(item)}
+                  alt={getTitle(item)}
+                  className="w-full h-full object-cover"
+                />
+              ) : (
+                <div className="w-full h-full bg-gray-200 flex items-center justify-center">
+                  <span className="text-gray-400 text-sm">No image</span>
+                </div>
+              )}
               {/* Gradient overlay for better text readability */}
               <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
               
@@ -199,11 +213,17 @@ const EventsSection = () => {
               onClick={() => navigateToDetail(featuredItem)}
             >
               <div className="relative h-48 md:h-64">
-                <img 
-                  src={featuredItem.mainImage} 
-                  alt={getTitle(featuredItem)}
-                  className="w-full h-full object-cover"
-                />
+                {getSafeImageUrl(featuredItem) ? (
+                  <img 
+                    src={getSafeImageUrl(featuredItem)}
+                    alt={getTitle(featuredItem)}
+                    className="w-full h-full object-cover"
+                  />
+                ) : (
+                  <div className="w-full h-full bg-gray-200 flex items-center justify-center">
+                    <span className="text-gray-400">No image available</span>
+                  </div>
+                )}
                 {/* Item type badge */}
                 <div className="absolute top-4 right-4">
                   <span 
@@ -314,13 +334,19 @@ const EventsSection = () => {
                   className="bg-white border border-gray-100 rounded-lg overflow-hidden cursor-pointer hover:shadow-lg transition-shadow flex-shrink-0"
                   onClick={() => router.push(`/event-detail/${event.id}`)}
                 >
-                  {/* FIXED: Added explicit height */}
+                  {/* FIXED: Added explicit height - no fallback */}
                   <div className="h-24 w-full overflow-hidden">
-                    <img 
-                      src={event.mainImage}
-                      alt={event.title}
-                      className="w-full h-full object-cover"
-                    />
+                    {event.mainImage && event.mainImage.trim() !== '' ? (
+                      <img 
+                        src={event.mainImage}
+                        alt={event.title}
+                        className="w-full h-full object-cover"
+                      />
+                    ) : (
+                      <div className="w-full h-full bg-gray-200 flex items-center justify-center">
+                        <span className="text-gray-400 text-xs">No image</span>
+                      </div>
+                    )}
                   </div>
                   <div className="p-4">
                     <div className="text-xs font-medium mb-1" style={{ color: '#e64838' }}>