Merge pull request #172 from sanskar345/dxp-components/#170

Improved: ShopifyImg component migrated to .vue from .ts (#170)

src/components/ShopifyImg.vue

@@ -0,0 +1,47 @@
+<template>
+  <img :src="imageUrl" />
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUpdated, ref } from "vue";
+import { shopifyImgContext as context } from "../index";
+
+const props = defineProps(['src', 'size']);
+const imageUrl = ref(context.defaultImgUrl);
+
+const checkIfImageExists = (src: string) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(true);
+    img.onerror = () => reject(false);
+    img.src = src;
+  })
+};
+
+const prepareImgUrl = (src: string, size?: string) => {
+  // return original size if no size is given
+  if (!size) return src
+
+  // remove any current image size then add the new image size
+  return src
+    .replace(/_(pico|icon|thumb|small|compact|medium|large|grande|original|1024x1024|2048x2048|master)+\./g, '.')
+    .replace(/\.jpg|\.png|\.gif|\.jpeg/g, function (match) {
+      return '_' + size + match;
+    })
+};
+
+const setImageUrl = () => {
+  if (props.src) {
+    const src: string = prepareImgUrl(props.src, props.size)
+    checkIfImageExists(src).then(() => imageUrl.value = src)
+  }
+};
+
+onMounted(() => {
+  setImageUrl();
+});
+
+onUpdated(() => {
+  setImageUrl();
+});
+</script>

src/components/index.ts

@@ -16,3 +16,4 @@ import '@ionic/vue/css/display.css';
 
 export { default as ProductIdentifier } from "./ProductIdentifier.vue";
 export { default as LanguageSwitcher } from './LanguageSwitcher.vue';
+export { default as ShopifyImg } from './ShopifyImg.vue';

src/index.ts

@@ -3,9 +3,8 @@ declare var process: any;
 import { createPinia } from "pinia";
 import { useProductIdentificationStore } from "./store/productIdentification";
 import { useAuthStore } from "./store/auth";
-import { LanguageSwitcher, ProductIdentifier } from "./components";
+import { LanguageSwitcher, ProductIdentifier, ShopifyImg } from "./components";
 import Login from "./components/Login";
-import ShopifyImg from "./components/ShopifyImg";
 import { goToOms } from "./utils";
 import { initialiseFirebaseApp } from "./utils/firebase"
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'