From bd3988ce1d11fc2d06c57f47a351b179f146715a Mon Sep 17 00:00:00 2001
From: Henrik Hautakoski <henrik.hautakoski@gmail.com>
Date: Wed, 29 Apr 2026 21:51:14 +0200
Subject: [PATCH] feat(products): display product image in ProductCard

---
 frontend/src/components/products/ProductCard.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/products/ProductCard.vue b/frontend/src/components/products/ProductCard.vue
index d903e42..6f0d0b9 100644
--- a/frontend/src/components/products/ProductCard.vue
+++ b/frontend/src/components/products/ProductCard.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Product } from '@/api/types';
 import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
+import { imageUrl } from '@/api/image';
 
 defineProps<{
     item: Product
@@ -9,7 +10,15 @@ defineProps<{
 </script>
 
 <template>
-    <Card variant="soft">
+    <Card variant="soft" class="py-0 overflow-auto">
+        <img
+            v-if="item.thumbnail_url"
+            :src="imageUrl(item.thumbnail_url)"
+            :alt="item.name"
+            class="h-48 w-full object-cover"
+            loading="lazy"
+        >
+
         <CardHeader>
             <CardTitle>{{ item.name }}</CardTitle>
             <CardDescription>${{ item.price }} - {{ item.stock_quantity }} st</CardDescription>
@@ -18,7 +27,7 @@ defineProps<{
             </CardAction>
         </CardHeader>
 
-        <CardContent>
+        <CardContent class="pb-6">
             {{ item.description }}
         </CardContent>
     </Card>