Improved: ShopiImg component with vue composition api (#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,6 +16,7 @@ import '@ionic/vue/css/display.css';
 
 import MenuFooterNavigation from './MenuFooterNavigation.vue';
 import ProductIdentifier from './ProductIdentifier.vue';
+import ShopifyImg from './ShopifyImg.vue';
 
-export { MenuFooterNavigation, ProductIdentifier };
+export { MenuFooterNavigation, ProductIdentifier, ShopifyImg };
 

src/index.ts

@@ -3,12 +3,11 @@ import { useProductIdentificationStore } from "./store/productIdentification";
 import { useAuthStore } from "./store/auth";
 
 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'
-import { MenuFooterNavigation, ProductIdentifier } from "./components";
+import { MenuFooterNavigation, ProductIdentifier, ShopifyImg } from "./components";
 
 // TODO: handle cases when the store from app or pinia store are not available
 // creating a pinia store for the plugin