修复初始打开产品页面时偶尔出现图片只显示部分不完善的情况

app/files/[...path]/route.js

@@ -40,14 +40,14 @@ export async function GET(req, { params }) {
       const data = fs.readFileSync(localPath);
       return new NextResponse(data, {
         status: 200,
-        headers: { 'Content-Type': getContentType(localPath) }
+        headers: { 'Content-Type': getContentType(localPath), 'Cache-Control': 'public, max-age=31536000, immutable' }
       });
     }
 
     const remoteUrl = `${BACKEND_SERVER_URL}/files/${fileName}`;
     const res = await fetch(remoteUrl);
     if (!res.ok) {
-      return new NextResponse('Not Found', { status: 404 });
+      return new NextResponse('Not Found', { status: 404, headers: { 'Cache-Control': 'no-store' } });
     }
     const arrayBuffer = await res.arrayBuffer();
     const buffer = Buffer.from(arrayBuffer);
@@ -58,10 +58,10 @@ export async function GET(req, { params }) {
 
     return new NextResponse(buffer, {
       status: 200,
-      headers: { 'Content-Type': getContentType(localPath) }
+      headers: { 'Content-Type': getContentType(localPath), 'Cache-Control': 'public, max-age=31536000, immutable' }
     });
   } catch (e) {
-    return new NextResponse('Server Error', { status: 500 });
+    return new NextResponse('Server Error', { status: 500, headers: { 'Cache-Control': 'no-store' } });
   }
 }
 

components/products/ProductImageGallery.jsx

@@ -10,6 +10,37 @@ import "swiper/css/pagination";
 import "swiper/css/thumbs";
 import "swiper/css/free-mode";
 
+const ImageWithRetry = ({ src, alt, className }) => {
+  const [imageSrc, setImageSrc] = useState(src);
+  const retryCountRef = useRef(0);
+
+  useEffect(() => {
+    setImageSrc(src);
+    retryCountRef.current = 0;
+  }, [src]);
+
+  const handleError = useCallback(() => {
+    if (retryCountRef.current >= 3) return;
+    retryCountRef.current += 1;
+    const delay = 300 * retryCountRef.current;
+    setTimeout(() => {
+      const url = new URL(imageSrc, typeof window !== 'undefined' ? window.location.origin : 'http://localhost');
+      url.searchParams.set('v', String(Date.now()));
+      setImageSrc(url.pathname + url.search);
+    }, delay);
+  }, [imageSrc]);
+
+  return (
+    <img
+      src={imageSrc}
+      alt={alt}
+      className={className}
+      loading="lazy"
+      onError={handleError}
+    />
+  );
+};
+
 const ProductImageGallery = ({ data }) => {
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
   const [thumbsSwiper, setThumbsSwiper] = useState(null);
@@ -136,14 +167,10 @@ const ProductImageGallery = ({ data }) => {
             }
           }}
         >
-          <img
+          <ImageWithRetry
             src={attachment.file_url}
             alt={`${data?.title || 'Product'} - ${index + 1}`}
             className="w-full h-full object-cover"
-            loading="lazy"
-            onError={(e) => {
-              e.target.style.display = 'none';
-            }}
           />
           <div className="absolute inset-0 bg-gray-100 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
             <div className="w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin"></div>
@@ -157,11 +184,10 @@ const ProductImageGallery = ({ data }) => {
     <div className="w-full md:w-120 flex justify-center md:justify-start mb-4 md:mb-0 max-w-full">
       <div className="relative w-full max-w-[320px] md:max-w-full">
         <div className="relative overflow-hidden rounded-xl shadow-lg mb-6 group/main-image">
-          <img
+          <ImageWithRetry
             src={currentImage}
             alt={data?.title || 'Product Image'}
             className="w-full max-w-[320px] md:max-w-full object-contain"
-            loading="lazy"
           />
           
           {data.attachments.length > 1 && (

public/sitemap.xml

@@ -21,6 +21,11 @@
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>
+  <url>
+    <loc>http://192.168.2.200:3001/products/crossbody-bags/chic-leather-crossbody-bag-7</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.7</priority>
+  </url>
   <url>
     <loc>http://192.168.2.200:3001/products/fashion-handbags/chic-leather-crossbody-bag-2</loc>
     <changefreq>weekly</changefreq>
@@ -66,6 +71,11 @@
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>
+  <url>
+    <loc>http://192.168.2.200:3001/products/crossbody-bags/elegant-leather-crossbody-bag-6</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.7</priority>
+  </url>
   <url>
     <loc>http://192.168.2.200:3001/products/fashion-handbags/chic-leather-crossbody-bag-3</loc>
     <changefreq>weekly</changefreq>