From c5123718352530b9b4ff8110f9e604e2cccda8a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=AD=90=E7=90=A6?=
 <95332614+wangziqi0409@users.noreply.github.com>
Date: Wed, 14 Jan 2026 14:31:14 +0800
Subject: [PATCH] add

---
 frontend/src/pages/user/Home.vue        |  8 ++++++++
 frontend/src/pages/user/ProductList.vue | 14 ++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/frontend/src/pages/user/Home.vue b/frontend/src/pages/user/Home.vue
index f0c76d2..390f2d2 100644
--- a/frontend/src/pages/user/Home.vue
+++ b/frontend/src/pages/user/Home.vue
@@ -17,6 +17,7 @@
       <a-row :gutter="16">
         <a-col :span="6" v-for="item in home.hot" :key="item.id">
           <a-card hoverable @click="goDetail(item.id)">
+            <img v-if="item.imageUrl" :src="previewUrl(item.imageUrl)" class="card-img" />
             <div class="title">{{ item.name }}</div>
             <div class="price">￥{{ item.price }}</div>
           </a-card>
@@ -28,6 +29,7 @@
       <a-row :gutter="16">
         <a-col :span="6" v-for="item in home.newest" :key="item.id">
           <a-card hoverable @click="goDetail(item.id)">
+            <img v-if="item.imageUrl" :src="previewUrl(item.imageUrl)" class="card-img" />
             <div class="title">{{ item.name }}</div>
             <div class="price">￥{{ item.price }}</div>
           </a-card>
@@ -84,4 +86,10 @@ onMounted(load)
 .price {
   color: #f5222d;
 }
+.card-img {
+  width: 100%;
+  height: 140px;
+  object-fit: cover;
+  margin-bottom: 8px;
+}
 </style>
diff --git a/frontend/src/pages/user/ProductList.vue b/frontend/src/pages/user/ProductList.vue
index 6bf96c2..5499ff0 100644
--- a/frontend/src/pages/user/ProductList.vue
+++ b/frontend/src/pages/user/ProductList.vue
@@ -16,6 +16,7 @@
   <a-row :gutter="16" style="margin-top: 16px">
     <a-col :span="6" v-for="item in list" :key="item.id">
       <a-card hoverable @click="goDetail(item.id)">
+        <img v-if="item.imageUrl" :src="previewUrl(item.imageUrl)" class="card-img" />
         <div class="title">{{ item.name }}</div>
         <div class="price">￥{{ item.price }}</div>
         <div class="meta">销量 {{ item.sales }}</div>
@@ -30,6 +31,7 @@ import { useRouter } from 'vue-router'
 import api from '../../api'
 
 const router = useRouter()
+const baseUrl = 'http://localhost:8080'
 const list = ref([])
 const categories = ref([])
 const keyword = ref('')
@@ -50,6 +52,12 @@ const loadCategories = async () => {
 
 const goDetail = (id) => router.push(`/products/${id}`)
 
+const previewUrl = (url) => {
+  if (!url) return ''
+  if (url.startsWith('http')) return url
+  return `${baseUrl}${url}`
+}
+
 onMounted(() => {
   load()
   loadCategories()
@@ -60,4 +68,10 @@ onMounted(() => {
 .title { font-weight: 600; }
 .price { color: #f5222d; }
 .meta { color: #999; }
+.card-img {
+  width: 100%;
+  height: 140px;
+  object-fit: cover;
+  margin-bottom: 8px;
+}
 </style>