env: add variables for src and path

Author: utkace

example/sample-app/src/App.vue

@@ -5,34 +5,34 @@
     <IKImage
       :publicKey="publicKey"
       :urlEndpoint="urlEndpoint"
-      src="https://ik.imagekit.io/gqyojxcwzxj/ABC_BV8lzpfOS"
+      :src="src"
     />
     <p>Let's transform this once</p>
     <IKImage
       :publicKey="publicKey"
       :urlEndpoint="urlEndpoint"
-      src="https://ik.imagekit.io/gqyojxcwzxj/ABC_BV8lzpfOS"
+      :src="src"
       v-bind:transformation="[{height:300,width:400}]"
     />
     <p>Let's transform this more than once</p>
     <IKImage
       :publicKey="publicKey"
       :urlEndpoint="urlEndpoint"
-      path="/ABC_BV8lzpfOS"
+      :path="path"
       v-bind:transformation="[{height:300,width:400},{rotation:90}]"
     />
 
     <p>LQIP</p>
     <IKImage
       :publicKey="publicKey"
       :urlEndpoint="urlEndpoint"
-      src="https://ik.imagekit.io/gqyojxcwzxj/ABC_BV8lzpfOS"
+      :src="src"
       v-bind:lqip="{active:true,quality:20}"
     />
 
     <p>Adding a Image with Context</p>
     <IKContext :publicKey="publicKey" :urlEndpoint="urlEndpoint">
-      <IKImage path="/ABC_BV8lzpfOS" v-bind:transformation="[{height:300,width:400}]" />
+      <IKImage :path="path" v-bind:transformation="[{height:300,width:400}]" />
     </IKContext>
     <p>Upload</p>
     <IKContext
@@ -47,7 +47,7 @@
 </template>
 
 <script>
-import { IKImage, IKContext, IKUpload } from "imagekit-vue";
+import { IKImage, IKContext, IKUpload } from "imagekitio-vue";
 
 export default {
   name: "app",
@@ -60,7 +60,9 @@ export default {
     return {
       urlEndpoint: process.env.VUE_APP_URL_ENDPOINT,
       publicKey: process.env.VUE_APP_PUBLIC_KEY,
-      authenticationEndpoint: process.env.VUE_APP_AUTHENTICATION_ENDPOINT
+      authenticationEndpoint: process.env.VUE_APP_AUTHENTICATION_ENDPOINT,
+      src: "https://ik.imagekit.io/mindship/default-image.jpg",
+      path: "/default-image.jpg"
     };
   }
 };

tests/stories/0-ImageKitContext.stories.js

@@ -7,10 +7,11 @@ export default {
 
 const urlEndpoint = process.env.VUE_APP_URL_ENDPOINT;
 const publicKey = process.env.VUE_APP_PUBLIC_KEY;
+const src = "https://ik.imagekit.io/mindship/default-image.jpg";
 
 export const imageWithContext = () => ({
   components: { IKImage, IKContext },
-  template: `<IKContext publicKey="${publicKey}" urlEndpoint=${urlEndpoint}><IKImage src="https://ik.imagekit.io/gqyojxcwzxj/ABC_BV8lzpfOS"/></IKContext>`,
+  template: `<IKContext publicKey="${publicKey}" urlEndpoint=${urlEndpoint}><IKImage src="${src}"/></IKContext>`,
 });
 
 

tests/stories/1-ImageKitImage.stories.js

@@ -6,28 +6,30 @@ export default {
 
 const urlEndpoint = process.env.VUE_APP_URL_ENDPOINT;
 const publicKey = process.env.VUE_APP_PUBLIC_KEY;
+const src = "https://ik.imagekit.io/mindship/default-image.jpg";
+const path = "/default-image.jpg";
 
 export const imageWithSrc = () => ({
   components: { IKImage },
-  template: `<IKImage publicKey="${publicKey}" urlEndpoint=${urlEndpoint} src="https://ik.imagekit.io/gqyojxcwzxj/ABC_BV8lzpfOS"/>`,
+  template: `<IKImage publicKey="${publicKey}" urlEndpoint=${urlEndpoint} src=${src}/>`,
 });
 
 export const imageWithPath = () => ({
   components: { IKImage },
-  template: `<IKImage publicKey="${publicKey}" urlEndpoint=${urlEndpoint} path="/ABC_BV8lzpfOS"/>`,
+  template: `<IKImage publicKey="${publicKey}" urlEndpoint=${urlEndpoint} path=${path}/>`,
 });
 
 export const imageWithLQIP = () => ({
   components: { IKImage },
-  template: `<IKImage publicKey="${publicKey}" urlEndpoint=${urlEndpoint} src="https://ik.imagekit.io/gqyojxcwzxj/ABC_BV8lzpfOS" v-bind:lqip="{active:true,threshold:20}"/>`,
+  template: `<IKImage publicKey="${publicKey}" urlEndpoint=${urlEndpoint} src=${src} v-bind:lqip="{active:true,threshold:20}"/>`,
 });
 
 export const imageWithNoPublicKey = () => ({
   components: { IKImage },
-  template: `<IKImage publicKey="" urlEndpoint=${urlEndpoint} src="https://ik.imagekit.io/gqyojxcwzxj/ABC_BV8lzpfOS"/>`,
+  template: `<IKImage publicKey="" urlEndpoint=${urlEndpoint} src=${src}/>`,
 });
 
 export const imageWithNoUrlEndpoint = () => ({
   components: { IKImage },
-  template: `<IKImage publicKey="${publicKey}" urlEndpoint="" src="https://ik.imagekit.io/gqyojxcwzxj/ABC_BV8lzpfOS"/>`,
+  template: `<IKImage publicKey="${publicKey}" urlEndpoint="" src=${src}/>`,
 });

tests/stories/2-Transformations.stories.js

@@ -6,13 +6,14 @@ export default {
 
 const urlEndpoint = process.env.VUE_APP_URL_ENDPOINT;
 const publicKey = process.env.VUE_APP_PUBLIC_KEY;
+const src = "https://ik.imagekit.io/mindship/default-image.jpg";
 
 export const imageWithTransformation = () => ({
   components: { IKImage },
-  template: `<IKImage publicKey="${publicKey}" urlEndpoint=${urlEndpoint} src="https://ik.imagekit.io/gqyojxcwzxj/ABC_BV8lzpfOS" v-bind:transformation="[{height:300,width:400}]" />`,
+  template: `<IKImage publicKey="${publicKey}" urlEndpoint=${urlEndpoint} src=${src} v-bind:transformation="[{height:300,width:400}]" />`,
 });
 
 export const imageWithChainedTransformation = () => ({
   components: { IKImage },
-  template: `<IKImage publicKey="${publicKey}" urlEndpoint=${urlEndpoint} src="https://ik.imagekit.io/gqyojxcwzxj/ABC_BV8lzpfOS" v-bind:transformation="[{height:300,width:400},{rotation:90}]" />`,
+  template: `<IKImage publicKey="${publicKey}" urlEndpoint=${urlEndpoint} src=${src} v-bind:transformation="[{height:300,width:400},{rotation:90}]" />`,
 });