fix: แก้ การดึงรูปมาแสดงของ product

src/components/04_product-service/TotalProductCardComponent.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import AppBox from 'components/app/AppBox.vue';
 const addedProduct = ref<boolean>(false);
 
+const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
 defineProps<{
   title?: string;
   code?: string;
@@ -13,11 +14,16 @@ defineProps<{
   typeProduct?: string;
   price?: number;
   process?: number;
+  id?: string;
 }>();
 </script>
 
 <template>
-  <AppBox no-padding bordered style="box-shadow: var(--shadow-3)">
+  <AppBox
+    no-padding
+    bordered
+    style="box-shadow: var(--shadow-3); width: 236px; height: 286px"
+  >
     <div class="q-pa-sm">
       <div class="row flex justify-between text-bold">
         <div class="col-9">{{ title ?? 'title' }}</div>
@@ -93,14 +99,27 @@ defineProps<{
       >
         ฿ {{ price }}
       </div>
+
       <div
         class="flex justify-center rounded items-center q-my-md q-py-lg"
         :style="`background-color: var(${typeProduct === 'product' ? '--green-0' : '--orange-0'})`"
       >
         <q-img
-          :src="typeProduct === 'product' ? 'shop-image.png' : 'work-image.png'"
+          :src="`${baseUrl}/product/${id}/image`"
           style="height: 86px; max-width: 100px"
-        ></q-img>
+        >
+          <template #error>
+            <q-img
+              style="background: none; height: 86px; max-width: 100px"
+              :src="
+                typeProduct === 'product'
+                  ? '/shop-image.png'
+                  : '/work-image.png'
+              "
+              width="100%"
+            />
+          </template>
+        </q-img>
       </div>
       <div class="row justify-between items-center q-mb-xs">
         <div class="q-pr-md" v-if="typeProduct === 'work'">