From d85c2b13fb87bf2c1a82239002317ba1bd84b4cc Mon Sep 17 00:00:00 2001
From: chouchouji <1305974212@qq.com>
Date: Sat, 30 Mar 2024 12:22:48 +0800
Subject: [PATCH 1/2] feat(image-preview): export onLoad and style for image
 slot

---
 .../vant/src/image-preview/ImagePreviewItem.tsx |  6 +++++-
 packages/vant/src/image-preview/README.md       |  2 +-
 packages/vant/src/image-preview/README.zh-CN.md | 10 +++++-----
 .../vant/src/image-preview/test/index.spec.ts   | 17 +++++++++++++++++
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/packages/vant/src/image-preview/ImagePreviewItem.tsx b/packages/vant/src/image-preview/ImagePreviewItem.tsx
index 8a34f28ec41..f80d84edf52 100644
--- a/packages/vant/src/image-preview/ImagePreviewItem.tsx
+++ b/packages/vant/src/image-preview/ImagePreviewItem.tsx
@@ -407,7 +407,11 @@ export default defineComponent({
         >
           {slots.image ? (
             <div class={bem('image-wrap')}>
-              {slots.image({ src: props.src })}
+              {slots.image({
+                src: props.src,
+                onLoad: onLoad,
+                style: imageStyle.value,
+              })}
             </div>
           ) : (
             <Image
diff --git a/packages/vant/src/image-preview/README.md b/packages/vant/src/image-preview/README.md
index ffe527247a2..48e0f28c45e 100644
--- a/packages/vant/src/image-preview/README.md
+++ b/packages/vant/src/image-preview/README.md
@@ -302,7 +302,7 @@ imagePreviewRef.value?.swipeTo(1);
 | --- | --- | --- |
 | index | Custom index | _{ index: index of current image }_ |
 | cover | Custom content that covers the image preview | - |
-| image | Custom image content | _{ src: current image src }_ |
+| image | Custom image content | _{ src: current image src, onLoad: load image, style: current image style }_ |
 
 ### onClose Parameters
 
diff --git a/packages/vant/src/image-preview/README.zh-CN.md b/packages/vant/src/image-preview/README.zh-CN.md
index e69e8ebb043..7f4d7cbbe36 100644
--- a/packages/vant/src/image-preview/README.zh-CN.md
+++ b/packages/vant/src/image-preview/README.zh-CN.md
@@ -307,11 +307,11 @@ imagePreviewRef.value?.swipeTo(1);
 
 通过组件调用 `ImagePreview` 时，支持以下插槽：
 
-| 名称  | 说明                           | 参数                        |
-| ----- | ------------------------------ | --------------------------- |
-| index | 自定义页码内容                 | _{ index: 当前图片的索引 }_ |
-| cover | 自定义覆盖在图片预览上方的内容 | -                           |
-| image | 自定义图片内容                 | _{ src: 当前资源地址 }_     |
+| 名称 | 说明 | 参数 |
+| --- | --- | --- |
+| index | 自定义页码内容 | _{ index: 当前图片的索引 }_ |
+| cover | 自定义覆盖在图片预览上方的内容 | - |
+| image | 自定义图片内容 | _{ src: 当前资源地址, onLoad: 加载图片函数, style: 当前图片样式 }_ |
 
 ### onClose 回调参数
 
diff --git a/packages/vant/src/image-preview/test/index.spec.ts b/packages/vant/src/image-preview/test/index.spec.ts
index 25dddcd910c..94525b683a1 100644
--- a/packages/vant/src/image-preview/test/index.spec.ts
+++ b/packages/vant/src/image-preview/test/index.spec.ts
@@ -403,6 +403,23 @@ test('should render image slot correctly 2', async () => {
   expect(wrapper.html().includes('video')).toBeTruthy();
 });
 
+test('should render image slot correctly 3', async () => {
+  const wrapper = mount(ImagePreview, {
+    props: {
+      show: true,
+      images,
+    },
+    slots: {
+      image: ({ src, style }) =>
+        `<img class="test-img" src="${src}" style="${Object.assign({ width: '100px' }, style)}" />`,
+    },
+  });
+
+  await later();
+
+  expect(wrapper.html().includes('width: 100px')).toBeTruthy();
+});
+
 test('should emit long-press event after long press', async () => {
   const onLongPress = vi.fn();
   const wrapper = mount(ImagePreview, {

From e222afdf233661f39d950aafc9d64f27fbde3e4d Mon Sep 17 00:00:00 2001
From: chouchouji <1305974212@qq.com>
Date: Sat, 30 Mar 2024 21:27:31 +0800
Subject: [PATCH 2/2] refactor(image-preview): optimize code

---
 packages/vant/src/image-preview/ImagePreviewItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vant/src/image-preview/ImagePreviewItem.tsx b/packages/vant/src/image-preview/ImagePreviewItem.tsx
index f80d84edf52..229cca488dc 100644
--- a/packages/vant/src/image-preview/ImagePreviewItem.tsx
+++ b/packages/vant/src/image-preview/ImagePreviewItem.tsx
@@ -409,7 +409,7 @@ export default defineComponent({
             <div class={bem('image-wrap')}>
               {slots.image({
                 src: props.src,
-                onLoad: onLoad,
+                onLoad,
                 style: imageStyle.value,
               })}
             </div>