Refactor to ProductImage

Author: w3bdesign

components/Products/ProductImage.vue

@@ -0,0 +1,23 @@
+<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"
+  />
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  alt: { type: String, required: true },
+  src: { type: String, required: true },
+});
+
+const config = useRuntimeConfig();
+
+const displayedImage = computed(() => {
+  return props.src || config.placeholderImage;
+});
+</script>

components/Products/ProductsSingleProduct.vue

@@ -5,20 +5,10 @@
         <div
           class="grid grid-cols-1 gap-4 mt-8 lg:grid-cols-2 xl:grid-cols-2 md:grid-cols-2 sm:grid-cols-2"
         >
-          <img
-            v-if="data.product.image"
-            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"
+          <ProductImage
             :alt="data.product.name"
             :src="data.product.image.sourceUrl"
           />
-          <img
-            v-else
-            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="data.product.name"
-            :src="config.placeholderImage"
-          />
           <div class="ml-8">
             <p class="text-3xl font-bold text-left">
               {{ data.product.name }}
@@ -90,6 +80,8 @@
 import GET_SINGLE_PRODUCT_QUERY from "@/apollo/queries/GET_SINGLE_PRODUCT_QUERY.gql";
 import ADD_TO_CART_MUTATION from "@/apollo/mutations/ADD_TO_CART_MUTATION.gql";
 
+import ProductImage from "@/components/Products/ProductImage.vue";
+
 import {
   stripHTML,
   filteredVariantPrice,
@@ -100,8 +92,6 @@ import { useCart } from "@/store/useCart";
 
 const isLoading = useState("isLoading", () => false);
 
-const config = useRuntimeConfig();
-
 const cart = useCart();
 
 const props = defineProps({