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,46 +134,56 @@ 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" 
-              height="400" 
-              sx={{ 
-                objectFit: 'contain',
-                cursor: 'pointer',
-                transition: 'transform 0.2s ease-in-out',
-                width: '499px',
-                maxWidth: '100%',
-                '&:hover': {
-                  transform: 'scale(1.02)'
-                }
-              }} 
-              image={this.state.pics[this.state.mainPic]}
-              onClick={this.props.onOpenFullscreen}
-            />
-            <IconButton
-              size="small"
-              disableRipple
-              sx={{
-                position: 'absolute',
-                top: 8,
-                right: 8,
-                color: 'white',
-                backgroundColor: 'rgba(0, 0, 0, 0.4)',
-                pointerEvents: 'none',
-                '&:hover': {
-                  backgroundColor: 'rgba(0, 0, 0, 0.6)'
-                }
-              }}
-            >
-              <LoupeIcon fontSize="small" />
-            </IconButton>
-          </Box>
-        )}
+        <Box sx={{ position: 'relative', display: 'inline-block', width: '499px', maxWidth: '100%' }}>
+          <CardMedia 
+            component="img" 
+            height="400" 
+            sx={{ 
+              objectFit: 'contain',
+              cursor: 'pointer',
+              transition: 'transform 0.2s ease-in-out',
+              width: '499px',
+              maxWidth: '100%',
+              '&:hover': {
+                transform: 'scale(1.02)'
+              }
+            }} 
+            image={getImageSrc()}
+            onClick={this.props.onOpenFullscreen}
+          />
+          <IconButton
+            size="small"
+            disableRipple
+            sx={{
+              position: 'absolute',
+              top: 8,
+              right: 8,
+              color: 'white',
+              backgroundColor: 'rgba(0, 0, 0, 0.4)',
+              pointerEvents: 'none',
+              '&:hover': {
+                backgroundColor: 'rgba(0, 0, 0, 0.6)'
+              }
+            }}
+          >
+            <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