Эх сурвалжийг харах

fix: 修复产品列表及详情页图片由于 localhost 被 Next.js 拦截导致的加载失败和延迟问题

nahida 1 сар өмнө
parent
commit
f1daf8ec76

+ 21 - 2
src/app/products/[id]/page.tsx

@@ -9,6 +9,8 @@ import ServiceConsultation from '@/components/support/ServiceConsultation';
 
 export const dynamicParams = true
 const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL as string
+const REMOTE_BASE_URL = process.env.NEXT_PUBLIC_REMOTE_BASE_URL || 'http://47.107.107.47:8040'
+
 export const generateStaticParams = async () => {
     const res = await serverGet<Page<ProductCenter>, { pageNum: number; pageSize: number }>(
         "/webSite/getProductByPage",
@@ -43,7 +45,24 @@ async function Page({
         return <ContentNotFound/>
     }
 
-    return (
+    // 处理图片路径(解决 Next.js 生产环境拦截 localhost 图片导致的 400 报错)
+    let coverImageUrl = res.data.productUrl || '';
+    if (coverImageUrl) {
+        if (coverImageUrl.startsWith('http')) {
+            if (coverImageUrl.includes('localhost')) {
+                try {
+                    const urlObj = new URL(coverImageUrl);
+                    coverImageUrl = `${REMOTE_BASE_URL}${urlObj.pathname}${urlObj.search}`;
+                } catch (e) {}
+            }
+        } else {
+            coverImageUrl = `${REMOTE_BASE_URL.replace(/\/$/, '')}/${coverImageUrl.replace(/^\//, '')}`;
+        }
+    } else {
+        coverImageUrl = "/assets/home/20.png"
+    }
+
+  return (
         <>
             <div className="w-4/5 mx-auto">
                 <div className="pt-5 sm:pt-10 sm:ml-20 flex gap-2">
@@ -73,7 +92,7 @@ async function Page({
                     {/*/>*/}
                     <Image
                         className="w-full h-64 sm:h-[300px] object-contain"
-                        src={res.data.productUrl ? BASE_URL + res.data.productUrl : "/assets/home/20.png"}
+                        src={coverImageUrl}
                         alt={res.data.productName ? res.data.productName : "产品详情"}
                         width={1000}
                         height={1000}

+ 15 - 3
src/components/products/ProductGridClient.tsx

@@ -41,6 +41,7 @@ interface ProductGridProps {
 export default function ProductGrid({products}: ProductGridProps) {
   // 修复:增加空值判断,避免环境变量未定义报错
   const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || ''
+  const REMOTE_BASE_URL = process.env.NEXT_PUBLIC_REMOTE_BASE_URL || 'http://47.107.107.47:8040'
 
   // 分页控制
   const [currentPage, setCurrentPage] = useState(1)
@@ -155,10 +156,21 @@ export default function ProductGrid({products}: ProductGridProps) {
     }
   }
 
-  // 处理图片路径(增加容错)
+  // 处理图片路径(增加容错和本地路径替换,解决 Next.js 生产环境拦截 localhost 图片导致的 400 报错
   const getProductImageUrl = (product: ProductItem) => {
-    if (product.productUrl) {
-      return `${BASE_URL}${product.productUrl}`
+    let coverImageUrl = product.productUrl || '';
+    if (coverImageUrl) {
+      if (coverImageUrl.startsWith('http')) {
+        if (coverImageUrl.includes('localhost')) {
+          try {
+            const urlObj = new URL(coverImageUrl);
+            coverImageUrl = `${REMOTE_BASE_URL}${urlObj.pathname}${urlObj.search}`;
+          } catch (e) {}
+        }
+      } else {
+        coverImageUrl = `${REMOTE_BASE_URL.replace(/\/$/, '')}/${coverImageUrl.replace(/^\//, '')}`;
+      }
+      return coverImageUrl;
     }
     return "/assets/productions/2.png"
   }