From 83bcbf573843d6add406a3bd5feb22ddf7be6e41 Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Sun, 31 Mar 2024 20:23:04 +0800
Subject: [PATCH] docs(ImagePreview): add image slot scale guide (#12751)

---
 packages/vant/src/image-preview/README.md       | 14 ++++++++++++++
 packages/vant/src/image-preview/README.zh-CN.md | 14 ++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/packages/vant/src/image-preview/README.md b/packages/vant/src/image-preview/README.md
index 48e0f28c4..c5077498e 100644
--- a/packages/vant/src/image-preview/README.md
+++ b/packages/vant/src/image-preview/README.md
@@ -185,6 +185,20 @@ export default {
 };
 ```
 
+When you customize the image through the `image` slot, you can bind the `style` and `onLoad` callback through the params of the slot, which can allow the `<img>` tag to support image scaling.
+
+```html
+<van-image-preview
+  v-model:show="show"
+  :images="images"
+  :close-on-click-image="false"
+>
+  <template #image="{ src, style, onLoad }">
+    <img :style="[{ width: '100%' }, style]" @load="onLoad" />
+  </template>
+</van-image-preview>
+```
+
 ## API
 
 ### Methods
diff --git a/packages/vant/src/image-preview/README.zh-CN.md b/packages/vant/src/image-preview/README.zh-CN.md
index 7f4d7cbbe..e724214c9 100644
--- a/packages/vant/src/image-preview/README.zh-CN.md
+++ b/packages/vant/src/image-preview/README.zh-CN.md
@@ -186,6 +186,20 @@ export default {
 };
 ```
 
+当你通过 `image` 插槽自定义图片时，可以通过插槽的参数绑定 `style` 样式和 `onLoad` 回调函数，这可以让 `<img>` 标签支持图片缩放。
+
+```html
+<van-image-preview
+  v-model:show="show"
+  :images="images"
+  :close-on-click-image="false"
+>
+  <template #image="{ src, style, onLoad }">
+    <img :style="[{ width: '100%' }, style]" @load="onLoad" />
+  </template>
+</van-image-preview>
+```
+
 ## API
 
 ### 方法