Use ProductImage

Author: w3bdesign

components/Products/ProductImage.vue

@@ -1,23 +1,22 @@
 <template>
-  <img
-    id="product-image"
-    class="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:shadow-lg hover:scale-95"
-    :alt="alt"
-    :src="displayedImage"
-  />
+    <img id="product-image"
+        class="h-auto p-8 transition duration-500 ease-in-out transform md:p-0  hover:shadow-lg hover:scale-95" :alt="alt"
+        :src="displayedImage" :width="width" :height="height" />
 </template>
 
 <script setup>
 import { computed } from "vue";
 
 const props = defineProps({
-  alt: { type: String, required: true },
-  src: { type: String, required: true },
+    alt: { type: String, required: true },
+    src: { type: String, required: true },
+    width: { type: String, required: false },
+    height: { type: String, required: false },
 });
 
 const config = useRuntimeConfig();
 
 const displayedImage = computed(() => {
-  return props.src || config.placeholderImage;
+    return props.src || config.placeholderImage;
 });
 </script>

components/Products/ProductsShowAll.vue

@@ -17,12 +17,8 @@
                 query: { id: product.databaseId },
               }"
             >
-              <img
-                id="product-image"
-                class="p-8 border mx-auto w-4/5 border-gray-200 rounded drop-shadow-lg transition duration-500 ease-in-out transform cursor-pointer lg:ml-0 lg:w-full lg:p-2 hover:scale-95"
-                :alt="product.name"
-                :src="productImage(product)"
-              />
+              <ProductImage :alt="product.name" :src="productImage(product)" />
+
               <div class="flex justify-center pt-3">
                 <p class="text-2xl font-bold text-center cursor-pointer">
                   {{ product.name }}
@@ -69,12 +65,8 @@
                 query: { id: product.databaseId },
               }"
             >
-              <img
-                id="product-image"
-                class="p-8 border mx-auto w-4/5 border-gray-200 rounded drop-shadow-lg transition duration-500 ease-in-out transform cursor-pointer lg:ml-0 lg:w-full lg:p-2 hover:scale-95"
-                :alt="product.name"
-                :src="productImage(product)"
-              />
+              <ProductImage :alt="product.name" :src="productImage(product)" />
+
               <div class="flex justify-center pt-3">
                 <p class="text-2xl font-bold text-center cursor-pointer">
                   {{ product.name }}
@@ -111,6 +103,8 @@
 import FETCH_ALL_PRODUCTS_QUERY from "@/apollo/queries/FETCH_ALL_PRODUCTS_QUERY.gql";
 import GET_PRODUCTS_FROM_CATEGORY_QUERY from "@/apollo/queries/GET_PRODUCTS_FROM_CATEGORY_QUERY.gql";
 
+import ProductImage from "@/components/Products/ProductImage.vue";
+
 import { filteredVariantPrice } from "@/utils/functions";
 
 const props = defineProps({