Browse Source

fix: 补充首页核心产品和软件产品组件中被遗漏的 localhost 图片路径拦截处理

nahida 1 month ago
parent
commit
d2fa457cd5
2 changed files with 41 additions and 3 deletions
  1. 21 2
      src/components/CoreProducts.tsx
  2. 20 1
      src/components/ProductionSoft.tsx

+ 21 - 2
src/components/CoreProducts.tsx

@@ -9,7 +9,26 @@ interface ProductMenuProps {
 
 export default function CoreProducts({products}: ProductMenuProps) {
 
-  const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL as string
+  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 getProductImageUrl = (url?: string) => {
+    let coverImageUrl = url || '';
+    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"
+  }
 
   const filteredProducts = useMemo(() => {
     return (products ?? []).filter((item) => item.productCategoryName !== "软件产品")
@@ -99,7 +118,7 @@ export default function CoreProducts({products}: ProductMenuProps) {
             </p>
             <div className="mt-3 sm:mt-5 w-full overflow-hidden rounded-lg bg-gray-50">
               <Image
-                src={product.productUrl ? BASE_URL + product.productUrl : "/assets/productions/2.png"}
+                src={getProductImageUrl(product.productUrl)}
                 alt={product.productName}
                 width={1000}
                 height={1000}

+ 20 - 1
src/components/ProductionSoft.tsx

@@ -7,8 +7,27 @@ import {Carousel} from "antd";
 
 function ProductionSoft({products}: {products: ProductCategory[]}) {
   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 [isMobile, setIsMobile] = useState(false);
 
+  const getProductImageUrl = (url?: string) => {
+    let coverImageUrl = url || '';
+    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"
+  }
+
   useEffect(() => {
     const checkMobile = () => setIsMobile(window.innerWidth < 640);
     checkMobile();
@@ -52,7 +71,7 @@ function ProductionSoft({products}: {products: ProductCategory[]}) {
                     >
                       <div className="w-full bg-gray-50 overflow-hidden">
                         <Image
-                          src={product.productUrl ? BASE_URL + product.productUrl : "/assets/productions/2.png"}
+                          src={getProductImageUrl(product.productUrl)}
                           alt={product.productName}
                           width={1000}
                           height={1000}