docs(image): update props

pages/en-us/components/display.mdx

@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Display, Code, Snippet } from 'components'
+import { Display, Code, Snippet, Image } from 'components'
 
 export const meta = {
   title: 'Display',
@@ -13,14 +13,13 @@ To display important information or images in a central alignment.
 <Playground
   title="Basic"
   desc="Describe the main part with a paragraph."
-  scope={{ Display }}
+  scope={{ Display, Image }}
   code={`
   <Display shadow caption="ZEIT Now for GitHub deploying a pull request automatically.">
-    <img height="214" src="https://zeit.co/docs/static/docs/git-integrations/github-comment.png" />
+    <Image width="435" height="200" src="https://zeit.co/docs/static/docs/git-integrations/github-comment.png" />
   </Display>
 `} />
 
-
 <Playground
   title="With Code"
   desc="Show multiline code blocks."
@@ -55,10 +54,10 @@ To display important information or images in a central alignment.
 <Playground
   title="Component Caption"
   desc="Use component on `caption` prop."
-  scope={{ Display, Code }}
+  scope={{ Display, Code, Image }}
   code={`
   <Display shadow caption={<p>A domain redirect that redirects requests made to <Code>www.zeit.rocks</Code> to <Code>zeit.rocks</Code>.</p>}>
-    <img width="650" height="305" src="https://zeit.co/docs/static/docs/custom-domains/redirecting-domains.png" />
+    <Image width="650" height="297" src="https://zeit.co/docs/static/docs/custom-domains/redirecting-domains.png" />
   </Display>
 `} />
 

pages/en-us/components/image.mdx

@@ -61,7 +61,8 @@ Display image content.
 | Attribute | Description | Type | Accepted values | Default
 | ---------- | ---------- | ---- |  -------------- | ------ |
 | **src** | image src | `string` | - | - |
-| **animation** | display animation when loading  | `boolean` | - | `true` |
+| **disableSkeleton** | disable skeleton animation when loading  | `boolean` | - | `false` |
+| **disableAutoResize** | disable zooming when width is too small  | `boolean` | - | `false` |
 | **maxDelay**(ms) | max duration of animation | `number` | - | `3000` |
 | **width** | width | `number` | - | - |
 | **height** | height | `number` | - | - |

pages/zh-cn/components/display.mdx

@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Display, Code, Snippet } from 'components'
+import { Display, Code, Snippet, Image } from 'components'
 
 export const meta = {
   title: '陈列框 Display',
@@ -12,10 +12,10 @@ export const meta = {
 
 <Playground
   desc="为一张图片添加描述文本。"
-  scope={{ Display }}
+  scope={{ Display, Image }}
   code={`
   <Display shadow caption="ZEIT Now 在 PR 上的自动部署。">
-    <img height="214" src="https://zeit.co/docs/static/docs/git-integrations/github-comment.png" />
+    <Image width="435" height="200" src="https://zeit.co/docs/static/docs/git-integrations/github-comment.png" />
   </Display>
 `} />
 
@@ -54,10 +54,10 @@ export const meta = {
 <Playground
   title="组件标题"
   desc="在 `caption` 属性上使用组件表达更丰富的信息。"
-  scope={{ Display, Code }}
+  scope={{ Display, Code, Image }}
   code={`
   <Display shadow caption={<p>将域名 <Code>www.zeit.rocks</Code> 重定向至 <Code>zeit.rocks</Code>。</p>}>
-    <img width="650" height="305" src="https://zeit.co/docs/static/docs/custom-domains/redirecting-domains.png" />
+    <Image width="650" height="297" src="https://zeit.co/docs/static/docs/custom-domains/redirecting-domains.png" />
   </Display>
 `} />
 

pages/zh-cn/components/image.mdx

@@ -60,7 +60,8 @@ export const meta = {
 | 属性 | 描述 | 类型 | 推荐值 | 默认
 | ---------- | ---------- | ---- |  -------------- | ------ |
 | **src** | 图片地址 | `string` | - | - |
-| **animation** | 是否在加载时显示骨架动画  | `boolean` | - | `true` |
+| **disableSkeleton** | 禁用加载时的骨架动画  | `boolean` | - | `false` |
+| **disableAutoResize** | 禁用等比缩放图片 (当小于指定宽度时)  | `boolean` | - | `false` |
 | **maxDelay** | 动画持续最大时间 (毫秒)  | `number` | - | `3000` |
 | **width** | 宽度 | `number` | - | - |
 | **height** | 高度 | `number` | - | - |