dynamic images of products

src/views/base/products/components/ProductItem.vue

@@ -2,13 +2,7 @@
 <div class="flex bg-white border-1 border-gray-200 rounded-lg"
      :class="props.ProductItem.show ? 'bg-white opacity-100' : 'bg-gray-200 opacity-50'">
   <div class="bg-gray-100 m-2 rounded-lg w-28 h-28 flex justify-center p-2">
-    <img v-if="props.ProductItem.group_type=='گوی'"  :src="goyImg">
-    <img v-if="props.ProductItem.group_type=='مکعب'" :src="mokaabImg">
-    <img v-if="props.ProductItem.group_type=='سکه'" :src="sekkeImg">
-    <img v-if="props.ProductItem.group_type=='مس'" :src="mesImg">
-    <img v-if="props.ProductItem.group_type=='نقره'" :src="noghrehImg">
-    <img v-if="props.ProductItem.group_type=='سکه پارسیان'" :src="parsianImg">
-    <img v-if="props.ProductItem.group_type=='طلا'|| props.ProductItem.group_type=='آبشده'|| props.ProductItem.group_type== null" :src="defaultImg">
+    <img :src="displayImage" class="object-contain w-full h-full" alt="">
   </div>
   <div class="m-1 flex flex-col gap-1 justify-center">
     <div class="text-base font-500">{{ props.ProductItem.title }}</div>
@@ -36,6 +30,7 @@ import parsianImg from "@/assets/img/parsianImg.svg"
 
 import type {Product} from "@/models/products";
 import {usePrice} from '@/utils/usePrice';
+import {getFileUrl} from '@/utils/file';
 import {computed, ref} from "vue";
 import { lastPrice } from '@/utils/price'
 import type { Price } from '@/models/home'
@@ -49,6 +44,21 @@ const amountProduct=computed(()=>{
   }else return `${props.ProductItem.amount}گرم`
 })
 const props = withDefaults(defineProps<Prop>(), {})
+
+const defaultImages: Record<string, string> = {
+  'گوی': goyImg,
+  'مکعب': mokaabImg,
+  'سکه': sekkeImg,
+  'مس': mesImg,
+  'نقره': noghrehImg,
+  'سکه پارسیان': parsianImg,
+}
+
+const displayImage = computed(() => {
+  const fileUrl = getFileUrl(props.ProductItem.file)
+  if (fileUrl) return fileUrl
+  return defaultImages[props.ProductItem.group_type] ?? defaultImg
+})
 // const typeOfProduct=(val:string)=>{
 //   if (val.includes('گوی'))
 //     return 'گوی'