feat: implement product image saving in prerender-single-product and enhance image loading logic in Images component

prerender-single-product.cjs

@@ -88,6 +88,12 @@ const renderSingleProduct = async (productSeoName) => {
         const productDetails = await fetchProductDetails(socket, productSeoName);
         console.log(`📦 Product found: ${productDetails.product.name}`);
         
+        // Save product image to static files
+        if (productDetails.product) {
+          console.log(`📷 Saving product image...`);
+          await saveProductImages(socket, [productDetails.product], "Single Product", config.outputDir);
+        }
+        
         // Set up minimal global cache (empty for single product test)
         global.window.productCache = {};
         global.productCache = {};

src/components/Images.js

@@ -134,10 +134,21 @@ class Images extends Component {
       );
     }
 
-    // SPA version - full functionality
+    // SPA version - full functionality with static fallback
+    const getImageSrc = () => {
+      // If dynamic image is loaded, use it
+      if (this.state.pics[this.state.mainPic]) {
+        return this.state.pics[this.state.mainPic];
+      }
+      // Otherwise, use static fallback (same as prerender)
+      if (!this.props.pictureList || !this.props.pictureList.trim()) {
+        return '/assets/images/nopicture.jpg';
+      }
+      return `/assets/images/prod${this.props.pictureList.split(',')[0].trim()}.jpg`;
+    };
+
     return (
       <>
-        {this.state.pics[this.state.mainPic] && (
         <Box sx={{ position: 'relative', display: 'inline-block', width: '499px', maxWidth: '100%' }}>
           <CardMedia 
             component="img" 
@@ -152,7 +163,7 @@ class Images extends Component {
                 transform: 'scale(1.02)'
               }
             }} 
-              image={this.state.pics[this.state.mainPic]}
+            image={getImageSrc()}
             onClick={this.props.onOpenFullscreen}
           />
           <IconButton
@@ -173,7 +184,6 @@ class Images extends Component {
             <LoupeIcon fontSize="small" />
           </IconButton>
         </Box>
-        )}
         <Stack direction="row" spacing={2} sx={{ justifyContent: 'flex-start', mt: 1,mb: 1 }}>
         {this.state.pics.filter(pic => pic !== null && pic !== this.state.pics[this.state.mainPic]).map((pic, filterIndex) => {
           // Find the original index in the full pics array