@@ -216,7 +221,13 @@
-
![]()
+
![]()
handleImageError(e, row.name)"
+ @load="(e) => handleImageLoad(e, 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
>(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>(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([])