Merge pull request #155 from sanskar345/picking/#146

Implemented: Replaced the usage of Image component with ShopifyImg component wherever the image is fetched from Shopify

src/components/Picklist-detail-item.vue

@@ -1,7 +1,7 @@
 <template>
   <ion-item :id="picklistItem.id" :class="picklistItem.id === lastScannedId ? 'scanned-item' : '' " :key="picklistItem.id" v-for="picklistItem in picklistItems"  @click="picklistItem.isChecked = !picklistItem.isChecked" lines="none" >
     <ion-thumbnail slot="start">
-      <Image :src="getProduct(picklistItem.productId).mainImageUrl" />
+      <ShopifyImg :src="getProduct(picklistItem.productId).mainImageUrl" size="small" />
     </ion-thumbnail>  
     <ion-label>
       <p class="caption">{{ getProduct(picklistItem.productId).parentProductName}}</p>
@@ -18,16 +18,16 @@
 import { IonCheckbox, IonItem, IonLabel, IonThumbnail } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { mapGetters, useStore } from 'vuex';
-import Image from '@/components/Image.vue'
+import { ShopifyImg } from '@hotwax/dxp-components';
 
 export default defineComponent({
   name: 'PicklistDetailItem',
   components: {
-    Image,
     IonCheckbox, 
     IonItem, 
     IonLabel,
-    IonThumbnail
+    IonThumbnail,
+    ShopifyImg
   },
   props: ['picklistItems', 'lastScannedId'],
   computed: {

src/main.ts

@@ -39,6 +39,7 @@ const app = createApp(App)
   .use(i18n)
   .use(store)
   .use(dxpComponents, {
+    defaultImgUrl: require("@/assets/images/defaultImage.png"),
     login,
     logout,
     loader,