diff --git a/resources/assets/js/pages/booking/transfer.vue b/resources/assets/js/pages/booking/transfer.vue
index fe103a79..abb37860 100644
--- a/resources/assets/js/pages/booking/transfer.vue
+++ b/resources/assets/js/pages/booking/transfer.vue
@@ -73,7 +73,7 @@
         <div class="card-body">
           <a target="_blank" :href="booking_details.user_bankslip_path">
             <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
-              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <img v-if="this.bankslip_is_image" v-bind:src="booking_details.user_bankslip_path" class="image">
               <p v-else>Download</p>
             </a>
           </a>    
@@ -140,6 +140,7 @@ export default {
           term: null
       },
       loading_btn: false,
+      bankslip_is_image: false,
       booking_details:{
           id: null,
           amount: null,
@@ -161,6 +162,13 @@ export default {
       .then((response) => {
         this.booking_details = response.data
         this.trackerConfig.term = response.data.term
+        
+        // check if path is image
+        var ext = this.booking_details.user_bankslip_path.split('.').pop(); 
+        if (ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png'){
+          this.bankslip_is_image = true
+        }
+
         loading.close()
 
       }).catch((error) => {
@@ -170,15 +178,11 @@ export default {
           name: 'notfound'
         })
       })
+    
+
+
   },
   methods: {
-    getExtension(path){
-      return path.slice(-3);
-    },
-    isImage(path){
-      var ext = this.getExtension(path);
-      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
-    },
     getURL(path){
       var getUrl = window.location;
       var baseUrl = getUrl.protocol + "//" + getUrl.host;