use Image component

components/nft/collection/AddImageToCollectionModal.vue

@@ -29,7 +29,7 @@
             <input v-model="imageUrl" type="text" class="form-control" id="addImageToCollectionInput" />
 
             <div v-if="imageUrl" class="mt-3">
-              <img :src="parseImageLink" :key="imageUrl" class="img-thumbnail img-fluid" style="max-width: 100px;" />
+              <Image :url="imageUrl" cls="img-thumbnail img-fluid" style="max-width: 100px;" />
               <br />
               <small>If image didn't appear above, then something is wrong with the link you added (wait until the loading indicator completes).</small>
             </div>
@@ -52,13 +52,14 @@
 import { ethers } from 'ethers';
 import { useEthers } from 'vue-dapp';
 import { useToast } from "vue-toastification/dist/index.mjs";
+import Image from '~/components/Image.vue';
 import WaitingToast from "~/components/WaitingToast";
 import FileUploadInput from '~/components/storage/FileUploadInput.vue';
 
 export default {
   name: 'AddImageToCollectionModal',
   props: ["cAddress", "mdAddress"],
-  components: { FileUploadInput },
+  components: { FileUploadInput, Image },
 
   data() {
     return {
@@ -72,18 +73,6 @@ export default {
     this.componentId = this.$.uid;
   },
 
-  computed: {
-    parseImageLink() {
-      let parsedImage = this.imageUrl;
-
-      if (parsedImage && parsedImage.includes("ipfs://")) {
-        parsedImage = parsedImage.replace("ipfs://", this.$config.ipfsGateway);
-      }
-
-      return parsedImage;
-    }
-  },
-
   methods: {
     async addNewImage() {
       this.waiting = true;