add

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>

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>