From 86635c26c4598a3ff4e0545b01c3544d78285c56 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sat, 1 Nov 2025 16:54:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=88=97=E8=A1=A8=E9=A1=B5?=
 =?UTF-8?q?=E6=9C=89=E4=BA=9B=E5=9B=BE=E7=89=87=E4=B8=8D=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/core/pagetype/GenericListPage.vue     | 73 +++++++++++++++++--
 1 file changed, 68 insertions(+), 5 deletions(-)

diff --git a/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue b/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
index fdbfa76..7b670c5 100644
--- a/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
+++ b/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
@@ -131,8 +131,13 @@
               />
             </div>
             <!-- 卡片图片 -->
-            <div v-if="imageFieldName && getImageUrl(row)" class="card-image">
-              <img :src="getImageUrl(row) || ''" :alt="row[primaryLabel] || row.name" />
+            <div v-if="imageFieldName && getImageUrl(row) && !cardImageLoadErrors.has(row.name)" class="card-image">
+              <img 
+                :src="getImageUrl(row) || ''" 
+                :alt="row[primaryLabel] || row.name"
+                @error="(e) => handleCardImageError(e, row.name)"
+                @load="(e) => handleCardImageLoad(e, row.name)"
+              />
             </div>
             <div class="card-content">
               <div class="info" @click.stop="openDetail(row.name)">
@@ -216,7 +221,13 @@
               </div>
               <!-- 列表图片 -->
               <div v-if="imageFieldName" class="col-image" @click.stop="openDetail(row.name)">
-                <img v-if="getImageUrl(row)" :src="getImageUrl(row) || ''" :alt="row[primaryLabel] || row.name" />
+                <img 
+                  v-if="getImageUrl(row) && !imageLoadErrors.has(row.name)" 
+                  :src="getImageUrl(row) || ''" 
+                  :alt="row[primaryLabel] || row.name"
+                  @error="(e) => handleImageError(e, row.name)"
+                  @load="(e) => handleImageLoad(e, row.name)"
+                />
                 <span v-else class="image-placeholder">—</span>
               </div>
               <div v-for="col in displayColumns" :key="col.key" :class="`col-${col.key}`" @click.stop="openDetail(row.name)">
@@ -388,8 +399,60 @@ const imageFieldName = computed(() => {
 function getImageUrl(row: any): string | null {
   if (!imageFieldName.value) return null
   const imageValue = row[imageFieldName.value]
-  if (!imageValue || typeof imageValue !== 'string') return null
-  return imageValue.trim() || null
+  if (!imageValue) return null
+  
+  // 处理字符串类型
+  if (typeof imageValue === 'string') {
+    const trimmed = imageValue.trim()
+    return trimmed || null
+  }
+  
+  // 处理可能被序列化为对象的字段值
+  if (typeof imageValue === 'object') {
+    // 尝试从对象中提取URL
+    const url = imageValue.file_url || imageValue.url || imageValue.value || imageValue
+    if (typeof url === 'string' && url.trim()) {
+      return url.trim()
+    }
+  }
+  
+  return null
+}
+
+// 图片加载错误处理（列表视图）
+const imageLoadErrors = ref<Set<string>>(new Set())
+
+function handleImageError(event: Event, rowName: string) {
+  const img = event.target as HTMLImageElement
+  imageLoadErrors.value.add(rowName)
+  console.warn('[ListPage] Image load failed:', {
+    rowName,
+    src: img.src,
+    imageField: imageFieldName.value,
+    rowData: rows.value.find((r: any) => r.name === rowName)?.[imageFieldName.value]
+  })
+}
+
+function handleImageLoad(_event: Event, rowName: string) {
+  imageLoadErrors.value.delete(rowName)
+}
+
+// 图片加载错误处理（卡片视图）
+const cardImageLoadErrors = ref<Set<string>>(new Set())
+
+function handleCardImageError(event: Event, rowName: string) {
+  const img = event.target as HTMLImageElement
+  cardImageLoadErrors.value.add(rowName)
+  console.warn('[ListPage] Card image load failed:', {
+    rowName,
+    src: img.src,
+    imageField: imageFieldName.value,
+    rowData: rows.value.find((r: any) => r.name === rowName)?.[imageFieldName.value]
+  })
+}
+
+function handleCardImageLoad(_event: Event, rowName: string) {
+  cardImageLoadErrors.value.delete(rowName)
 }
 
 const metaFields = ref<any[]>([])