优化图片处理逻辑：优先使用最小变体以节省流量，并新增 normalizeImageUrl 函数处理相对路径问题

webapp/src/lib/api-config.ts

@@ -35,6 +35,26 @@ export const buildApiUrl = (endpoint: string): string => {
   return `${API_BASE_URL}${normalizedEndpoint}`
 }
 
+/**
+ * 标准化图片 URL
+ * 当后端返回相对路径且配置了绝对 API 基础地址时，自动拼接完整域名
+ */
+export const normalizeImageUrl = (url: string | undefined): string => {
+  if (!url) return ''
+  if (url.startsWith('http')) return url
+
+  // 处理相对路径问题：如果配置了绝对 API 基础地址，则拼接 Origin
+  if (API_BASE_URL.startsWith('http')) {
+    try {
+      const origin = new URL(API_BASE_URL).origin
+      return url.startsWith('/') ? origin + url : origin + '/' + url
+    } catch (e) {
+      // 解析失败则返回原样
+    }
+  }
+  return url
+}
+
 /**
  * HTTP 状态码枚举
  */

webapp/src/views/Home.vue

@@ -156,7 +156,7 @@
         </div>
 
         <!-- 图片网格 -->
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
           <div 
             v-for="(image, index) in images" 
             :key="image.date || index"
@@ -264,6 +264,7 @@
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { useImageList } from '@/composables/useImages'
 import { bingPaperApi } from '@/lib/api-service'
+import { normalizeImageUrl } from '@/lib/api-config'
 import { useRouter } from 'vue-router'
 import { getDefaultMkt, setSavedMkt, SUPPORTED_REGIONS, setSupportedRegions } from '@/lib/mkt-utils'
 import {
@@ -570,8 +571,11 @@ const getLatestImageUrl = () => {
   return bingPaperApi.getImageUrlByDate(latestImage.value.date, 'UHD', 'jpg', latestImage.value.mkt)
 }
 
-// 获取图片 URL（缩略图 - 使用较小分辨率节省流量）
+// 获取图片 URL（缩略图 - 优先使用后端返回的最小变体以节省流量）
 const getImageUrl = (image: any) => {
+  if (image.variants && image.variants.length > 0) {
+    return normalizeImageUrl(image.variants[0].url)
+  }
   return bingPaperApi.getImageUrlByDate(image.date!, '640x480', 'jpg', image.mkt)
 }