refactor: simplify image loading logic and enhance prerender handling in Images component

src/components/Images.js

@@ -51,32 +51,22 @@ class Images extends Component {
           }else if(window.tinyPicCache[bildId]){
             pics.push(bildId);
             this.loadPic(this.props.fullscreenOpen ? 'large' : 'medium',bildId,newMainPic);
-          }else{
-            // For prerender or when sockets unavailable, use static path
-            if (!this.props.socket && !this.props.socketB) {
-              pics.push(`/assets/images/prod${bildId}.jpg`);
           }else{
             pics.push(bildId);
             this.loadPic(this.props.fullscreenOpen ? 'large' : 'medium',bildId,newMainPic);
           }  
-          }  
         }else{
           if(window.tinyPicCache[bildId]){
             pics.push(window.tinyPicCache[bildId]);
           }else if(window.mediumPicCache[bildId]){
             pics.push(window.mediumPicCache[bildId]);
             this.loadPic('tiny',bildId,newMainPic);
-          }else{
-            // For prerender or when sockets unavailable, use static path
-            if (!this.props.socket && !this.props.socketB) {
-              pics.push(`/assets/images/prod${bildId}.jpg`);
           }else{
             pics.push(null);
             this.loadPic('tiny',bildId,pics.length-1);
           }
         }
       }
-      }
       console.log('pics',pics);
       this.setState({ pics, mainPic: newMainPic });
     }else{
@@ -85,9 +75,6 @@ class Images extends Component {
   }
 
   loadPic = (size,bildId,index) => {
-    // Skip loading if sockets are not available (e.g., during prerender)
-    if (!this.props.socketB) return;
-    
     this.props.socketB.emit('getPic', { bildId, size }, (res) => {
       if(res.success){
         const url = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/jpeg' }));
@@ -112,6 +99,35 @@ class Images extends Component {
   }
 
   render() {
+    // Prerender detection - if no sockets, render simple CardMedia with static path
+    if (!this.props.socketB) {
+      const getImagePath = (pictureList) => {
+        if (!pictureList || !pictureList.trim()) {
+          return '/assets/images/nopicture.jpg';
+        }
+        return `/assets/images/prod${pictureList.split(',')[0].trim()}.jpg`;
+      };
+
+      return (
+        <Box sx={{ position: 'relative', display: 'inline-block' }}>
+          <CardMedia
+            component="img"
+            height="400"
+            image={getImagePath(this.props.pictureList)}
+            sx={{ 
+              objectFit: 'contain',
+              cursor: 'pointer',
+              transition: 'transform 0.2s ease-in-out',
+              '&:hover': {
+                transform: 'scale(1.02)'
+              }
+            }}
+          />
+        </Box>
+      );
+    }
+
+    // SPA version - full functionality
     return (
       <>
         {this.state.pics[this.state.mainPic] && (