diff --git a/components/image/__tests__/__snapshots__/demo.test.js.snap b/components/image/__tests__/__snapshots__/demo.test.js.snap
index 825c78a83f..9d8d19c3f3 100644
--- a/components/image/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/image/__tests__/__snapshots__/demo.test.js.snap
@@ -7,6 +7,18 @@ exports[`renders ./components/image/demo/basic.vue correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/image/demo/controlledPreview.vue correctly 1`] = `
+<div><button class="ant-btn ant-btn-primary" type="button">
+    <!----><span>show image preview</span>
+  </button>
+  <div class="ant-image" style="width: 200px;"><img class="ant-image-img" style="display: none;" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">
+    <!---->
+    <!---->
+  </div>
+  <!---->
+</div>
+`;
+
 exports[`renders ./components/image/demo/fallback.vue correctly 1`] = `
 <div class="ant-image" style="width: 200px; height: 200px;"><img class="ant-image-img" src="https://www.antdv.com/#error">
   <!---->
diff --git a/components/image/demo/controlledPreview.vue b/components/image/demo/controlledPreview.vue
new file mode 100644
index 0000000000..5a5239645b
--- /dev/null
+++ b/components/image/demo/controlledPreview.vue
@@ -0,0 +1,47 @@
+<docs>
+---
+order: 4
+title:
+  zh-CN: 受控的预览
+  en-US: Controlled Preview
+---
+
+## zh-CN
+
+可以使预览受控。
+
+## en-US
+
+You can make preview controlled.
+
+</docs>
+
+<template>
+  <div>
+    <a-button type="primary" @click="() => setVisible(true)">show image preview</a-button>
+    <a-image
+      :width="200"
+      :style="{ display: 'none' }"
+      :preview="{
+        visible,
+        onVisibleChange: setVisible,
+      }"
+      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+export default defineComponent({
+  setup() {
+    const visible = ref<boolean>(false);
+    const setVisible = (value): void => {
+      visible.value = value;
+    };
+    return {
+      visible,
+      setVisible,
+    };
+  },
+});
+</script>
diff --git a/components/image/demo/index.vue b/components/image/demo/index.vue
index 6131ffad9f..603251fa9e 100644
--- a/components/image/demo/index.vue
+++ b/components/image/demo/index.vue
@@ -4,6 +4,7 @@
     <fallback />
     <placeholder />
     <preview-group />
+    <controlled-preview />
   </demo-sort>
 </template>
 
@@ -12,6 +13,7 @@ import Basic from './basic.vue';
 import Fallback from './fallback.vue';
 import Placeholder from './placeholder.vue';
 import PreviewGroup from './previewGroup.vue';
+import ControlledPreview from './controlledPreview.vue';
 
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
@@ -24,6 +26,7 @@ export default defineComponent({
     Fallback,
     Placeholder,
     PreviewGroup,
+    ControlledPreview,
   },
 });
 </script>