Fix: Multiple requests when viewing the image (#2867)

solop-develop · Oct 24, 2024 · e63544d · e63544d
1 parent 493d087
commit e63544d
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 22 deletions.
diff --git a/src/components/PanThumb/index.vue b/src/components/PanThumb/index.vue
@@ -12,7 +12,23 @@
       :width="width"
       :height="height"
       class="pan-thumb"
-    />
+    >
+      <div slot="error">
+        <el-image
+          :src="imageDefault"
+          fit="contain"
+          :width="width"
+          :height="height"
+          style="
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            transform-origin: 95% 40%;
+            transition: all 0.3s ease-in-out;
+          "
+        />
+      </div>
+    </el-image>
   </div>
 </template>
 
@@ -36,6 +52,11 @@ export default {
       type: String,
       default: '150px'
     }
+  },
+  computed: {
+    imageDefault() {
+      return require('@/image/ADempiere/avatar/no-avatar.png')
+    }
   }
 }
 </script>

diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
@@ -57,7 +57,6 @@
         </div>
         <el-button slot="reference" type="text" style="padding-top: 5px;padding-right: 10px;">
           <el-image
-            v-if="!isEmptyValue(imageUrl)"
             :src="imageUrl"
             fit="contain"
             style="
@@ -69,8 +68,22 @@
               cursor: default;
               box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
             "
-          />
-          <el-avatar v-else size="large" :src="imageDefault" />
+          >
+            <div slot="error" class="image-slot">
+              <img
+                :src="imageDefault"
+                style="
+                  width: 40px;
+                  height: 40px;
+                  border-radius: 50%;
+                  display: inline-block;
+                  position: relative;
+                  cursor: default;
+                  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+                "
+              >
+            </div>
+          </el-image>
         </el-button>
       </el-popover>
     </div>

diff --git a/src/layout/components/ProfilePreview.vue b/src/layout/components/ProfilePreview.vue
@@ -7,7 +7,14 @@
           crossorigin="anonymous"
           fit="scale-down"
           class="circle-image"
-        />
+        >
+          <div slot="error" class="image-slot">
+            <img
+              :src="imageDefault"
+              class="circle-image"
+            >
+          </div>
+        </el-image>
       </el-col>
     </el-row>
     <roles-navbar />
@@ -76,6 +83,10 @@ export default defineComponent({
       return store.getters['user/getRole']
     })
 
+    const imageDefault = computed(() => {
+      return require('@/image/ADempiere/avatar/no-avatar.png')
+    })
+
     const userAvatar = computed(() => {
       return store.getters['user/getUserAvatar']
     })
@@ -116,6 +127,7 @@ export default defineComponent({
       userName,
       userAvatar,
       currentRole,
+      imageDefault,
       // Methods
       handleClick,
       pathImageWindows

diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
@@ -33,8 +33,18 @@
 
       <span v-else>
         <p key="expand" style="display: flex;text-align: center;width: 100%;padding: 0px 15px;margin-top: 0px;">
-          <img v-if="clientLogo" :src="clientLogo" class="sidebar-logo" style="height: 50px;width: 50px;" @click="dashboard()">
-          <img v-else src="https://avatars1.githubusercontent.com/u/1263359?s=200&v=4" class="sidebar-logo" style="height: 50px;width: 50px;" @click="dashboard()">
+          <el-image
+            style="width: 50px; height: 50px"
+            class="sidebar-logo"
+            :src="imageUrl"
+            fit="cover"
+          >
+            <div slot="error" class="image-slot">
+              <img src="https://avatars1.githubusercontent.com/u/1263359?s=200&v=4" class="sidebar-logo" style="height: 50px;width: 50px;" @click="dashboard()">
+            </div>
+          </el-image>
+          <!-- <img v-if="imageUrl" :src="imageUrl" class="sidebar-logo" style="height: 50px;width: 50px;" @click="dashboard()">
+          <img v-else src="https://avatars1.githubusercontent.com/u/1263359?s=200&v=4" class="sidebar-logo" style="height: 50px;width: 50px;" @click="dashboard()"> -->
           <!-- <svg-icon v-else icon-class="AD" class="standard-logo" /> -->
           <b style="color: white;font-size: 18px;padding-top: 15px;cursor: pointer; margin-left: 5px;" @click="dashboard()">
             {{ systemName }}
@@ -105,18 +115,6 @@ export default defineComponent({
       })
     })
 
-    // Methods
-    async function loadImage() {
-      clientLogo.value = 'https://avatars1.githubusercontent.com/u/1263359?s=200&v=4'
-      fetch(imageUrl.value)
-        .then(response => {
-          if (response.status === 200) {
-            clientLogo.value = imageUrl.value
-            return
-          }
-        })
-    }
-
     function profile() {
       router.push({
         path: '/profile/index?'
@@ -129,8 +127,6 @@ export default defineComponent({
       }, () => {})
     }
 
-    loadImage()
-
     return {
       // Ref
       title,
@@ -143,7 +139,6 @@ export default defineComponent({
       storedOrganization,
       // Methods
       dashboard,
-      loadImage,
       profile
     }
   }