feat: Image support preview src (ant-design#28643)

* feat: Image support preview src * add demo * add en doc
rockyuse · Jan 3, 2021 · 9689e3e · 9689e3e
1 parent fe9d538
commit 9689e3e
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 2 deletions.
diff --git a/components/image/__tests__/__snapshots__/demo.test.js.snap b/components/image/__tests__/__snapshots__/demo.test.js.snap
@@ -234,3 +234,43 @@ Array [
   </div>,
 ]
 `;
+
+exports[`renders ./components/image/demo/previewSrc.md correctly 1`] = `
+<div
+  class="ant-image"
+  style="width:200px"
+>
+  <img
+    class="ant-image-img"
+    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
+  />
+  <div
+    class="ant-image-mask"
+  >
+    <div
+      class="ant-image-mask-info"
+    >
+      <span
+        aria-label="eye"
+        class="anticon anticon-eye"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="eye"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+          />
+        </svg>
+      </span>
+      Preview
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/image/demo/previewSrc.md b/components/image/demo/previewSrc.md
@@ -0,0 +1,33 @@
+---
+order: 6
+title:
+  zh-CN: 自定义预览图片
+  en-US: Custom preview image
+---
+
+## zh-CN
+
+可以设置不同的预览图片。
+
+## en-US
+
+You can set different preview image.
+
+```jsx
+import React from 'react';
+import { Image } from 'antd';
+
+function ImageDemo() {
+  return (
+    <Image
+      width={200}
+      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
+      preview={{
+        src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+      }}
+    />
+  );
+}
+
+ReactDOM.render(<ImageDemo />, mountNode);
+```
diff --git a/components/image/index.en-US.md b/components/image/index.en-US.md
@@ -32,6 +32,7 @@ Previewable image.
   visible?: boolean;
   onVisibleChange?: (visible, prevVisible) => void;
   getContainer?: string | HTMLElement | (() => HTMLElement); // V4.8.0
+  src?: string; // V4.10.0
 }
 ```
 

diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md
@@ -32,7 +32,8 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
 {
   visible?: boolean;
   onVisibleChange?: (visible, prevVisible) => void;
-  getContainer: string | HTMLElement | (() => HTMLElement); // V4.8.0
+  getContainer?: string | HTMLElement | (() => HTMLElement); // V4.8.0
+  src?: string; // V4.10.0
 }
 ```
 

diff --git a/package.json b/package.json
@@ -124,7 +124,7 @@
     "rc-drawer": "~4.1.0",
     "rc-dropdown": "~3.2.0",
     "rc-field-form": "~1.17.3",
-    "rc-image": "~4.4.0",
+    "rc-image": "~4.5.0",
     "rc-input-number": "~6.1.0",
     "rc-mentions": "~1.5.0",
     "rc-menu": "~8.10.0",