From 128972a75329d4b14028d00cd23dac66038e2d4c Mon Sep 17 00:00:00 2001
From: chenjiahan <jait.chen@foxmail.com>
Date: Sat, 3 Dec 2022 20:18:01 +0800
Subject: [PATCH] fix(Image): load event not triggered in nuxt3

---
 packages/vant/src/image/Image.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/vant/src/image/Image.tsx b/packages/vant/src/image/Image.tsx
index eb3a56feb..00a6880f0 100644
--- a/packages/vant/src/image/Image.tsx
+++ b/packages/vant/src/image/Image.tsx
@@ -3,6 +3,7 @@ import {
   watch,
   computed,
   nextTick,
+  onMounted,
   onBeforeUnmount,
   defineComponent,
   getCurrentInstance,
@@ -69,7 +70,7 @@ export default defineComponent({
   setup(props, { emit, slots }) {
     const error = ref(false);
     const loading = ref(true);
-    const imageRef = ref<HTMLElement>();
+    const imageRef = ref<HTMLImageElement>();
 
     const { $Lazyload } = getCurrentInstance()!.proxy!;
 
@@ -156,7 +157,13 @@ export default defineComponent({
       }
 
       return (
-        <img src={props.src} onLoad={onLoad} onError={onError} {...attrs} />
+        <img
+          ref={imageRef}
+          src={props.src}
+          onLoad={onLoad}
+          onError={onError}
+          {...attrs}
+        />
       );
     };
 
@@ -191,6 +198,15 @@ export default defineComponent({
       });
     }
 
+    // In nuxt3, the image may not trigger load event,
+    // so the initial complete state should be checked.
+    // https://github.com/youzan/vant/issues/11335
+    onMounted(() => {
+      if (imageRef.value?.complete) {
+        onLoad();
+      }
+    });
+
     return () => (
       <div
         class={bem({ round: props.round, block: props.block })}