Bladeren bron

图片处理

FanLide 10 maanden geleden
bovenliggende
commit
e56581f5fe
5 gewijzigde bestanden met toevoegingen van 16 en 28 verwijderingen
  1. BIN
      public/favicon.ico
  2. BIN
      public/logo.gif
  3. BIN
      src/assets/imgs/logo.png
  4. 2 0
      src/components/Materials/src/Materials.vue
  5. 14 28
      src/utils/image-helper.ts

BIN
public/favicon.ico


BIN
public/logo.gif


BIN
src/assets/imgs/logo.png


+ 2 - 0
src/components/Materials/src/Materials.vue

@@ -94,6 +94,8 @@
                 <el-row :gutter="5">
                   <el-col v-for="(item, index) in tableData" :key="index" :span="4">
                     <el-card :body-style="{ padding: '5px' }">
+                      {{ console.log('item.url', item.url) }}
+                      {{ console.log('convertedImageUrl(item.url)', convertedImageUrl(item.url)) }}
                       <el-image
                         style="width: 100%; height: 100px"
                         :src="convertedImageUrl(item.url)"

+ 14 - 28
src/utils/image-helper.ts

@@ -8,9 +8,7 @@
  * @description
  *   该工具用于处理图片URL,支持将远程图片URL转换为本地路径。
  *   主要用于开发环境中,可以通过环境变量控制是否启用本地图片映射。
- *   支持两种映射方式:
- *   1. URL前缀替换:将远程URL中的API基础路径替换为本地路径
- *   2. 特定路径模式匹配:根据特定的URL模式提取路径信息,构建本地路径
+ *   简化处理逻辑:只处理以 /admin-api/ 开头的路径,本地路径和http/https URL不处理。
  */
 import { getMappedImagePath } from '@/config/image-mapping'
 
@@ -25,8 +23,8 @@ import { getMappedImagePath } from '@/config/image-mapping'
  *
  * @example
  * // 返回本地路径(启用本地映射)
- * convertImageUrl('http://localhost:48081/admin-api/infra/file/1/get/image.jpg')
- * // 返回: '/local-images/1/image.jpg'
+ * convertImageUrl('/admin-api/infra/file/1/get/image.jpg')
+ * // 返回: 'https://api.ifoodme.com/admin-api/infra/file/1/get/image.jpg'
  */
 export const convertImageUrl = (url: string): string => {
   if (!url) return ''
@@ -41,34 +39,22 @@ export const convertImageUrl = (url: string): string => {
     return mappedPath
   }
 
-  // 方案1: URL前缀替换
-  const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || ''
-  const localImageBase = import.meta.env.VITE_LOCAL_IMAGE_BASE || '/local-images'
-
-  // 处理完整URL的情况
+  // 如果是http或https开头的URL,不处理
   if (url.startsWith('http://') || url.startsWith('https://')) {
-    // 如果URL包含API基础路径,替换为本地路径
-    if (url.includes(apiBaseUrl)) {
-      return url.replace(apiBaseUrl, localImageBase)
-    }
+    return url
   }
 
-  // 方案4: 特定路径模式匹配
-  // 处理相对路径或特定格式的URL
-  if (url.includes('/admin-api/infra/file')) {
-    // 提取图片路径部分
-    const matches = url.match(/\/admin-api\/infra\/file\/(\d+)\/get\/(.*)/)
-    if (matches && matches.length >= 3) {
-      const folderId = matches[1]
-      const fileName = matches[2]
-
-      // 构建本地图片路径
-      return `${localImageBase}/${folderId}/${fileName}`
-    }
+  // 如果是本地路径(不以/admin-api/开头),不处理
+  if (!url.startsWith('/admin-api/')) {
+    return url
   }
 
-  // 如果没有匹配任何规则,返回原始URL
-  return url
+  // 处理以/admin-api/开头的路径
+  // 在原来的URL基础上追加localImageBase前缀
+  const localImageBase = import.meta.env.VITE_LOCAL_IMAGE_BASE || 'https://api.ifoodme.com'
+
+  // 不替换前缀,而是追加前缀
+  return `${localImageBase}${url}`
 }
 
 /**