From 9cf03134569035abca69836db4d379d752c43174 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 26 Sep 2022 10:46:14 +0800
Subject: [PATCH] fix: unable to load attachment images in production
 environment (halo-dev/console#622)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind bug
/milestone 2.0

#### What this PR does / why we need it:

修复在生产模式下，附件列表的图片无法及时加载的问题。

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/2465

#### Special notes for your reviewer:

/cc @halo-dev/sig-halo-console

测试方式：

1. 本地 console 仓库切换到此 PR 的分支。
2. 构建生产资源：`pnpm build`
3. 参考 https://github.com/halo-dev/halo/pull/2453 配置本地 Halo 代理 Console
4. 访问 <http://localhost:8090/console>，切换到附件页面。
5. 测试上传图片之后是否可以正常加载。

#### Does this PR introduce a user-facing change?

```release-note
None
```
---
 src/components/image/LazyImage.vue | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/image/LazyImage.vue b/src/components/image/LazyImage.vue
index 71f2135d2..dd953856a 100644
--- a/src/components/image/LazyImage.vue
+++ b/src/components/image/LazyImage.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useImage } from "@vueuse/core";
+import { onMounted, ref } from "vue";
 
 const props = withDefaults(
   defineProps<{
@@ -14,7 +14,28 @@ const props = withDefaults(
   }
 );
 
-const { isLoading, error } = useImage({ src: props.src });
+const isLoading = ref(false);
+const error = ref(false);
+
+const loadImage = async () => {
+  const image = new Image();
+  image.src = props.src;
+  return new Promise((resolve, reject) => {
+    image.onload = () => resolve(image);
+    image.onerror = (err) => reject(err);
+  });
+};
+
+onMounted(async () => {
+  isLoading.value = true;
+  try {
+    await loadImage();
+  } catch (e) {
+    error.value = true;
+  } finally {
+    isLoading.value = false;
+  }
+});
 </script>
 <template>
   <template v-if="isLoading">