[
https://issues.apache.org/jira/browse/WEEX-86?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=16220163#comment-16220163
]
ASF GitHub Bot commented on WEEX-86:
------------------------------------
Github user cxfeng1 commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/4#discussion_r147076974
--- Diff: source/cn/references/components/image.md ---
@@ -6,181 +6,148 @@ order: 8.02
version: 2.1
---
-# <image>
+`<image>` 用于在界面中显示单个图片。
-`<image>` 组件用于渲染图片，并且它不能包含任何子组件。新版 Vue 2.0 中**不支持**用 `<img>` 作简写。
+> **注意：**在HTML中通常使用的 `<img>` 标签在 Weex 中不支持，你应该使用`<image>` 。
-需要注意的是，需要明确指定 `width` 和 `height`，否则图片无法显示。
+> **注意：** Weex 没有内置的图片下载器，因为相关的下载、缓存、解码机制非常复杂，一些开源的工具如
[SDWebImage](https://github.com/rs/SDWebImage) 已经处理得很好， 所以在使用 `<image>` 之前，请在
native 侧先接入相应的 adapter 或者 handler。
+>
+> 参见: [Android adapter](../android-apis.html#Adapter) 和 [iOS
handler](../ios-apis.html#Handler-like-Android-Adapter)。
-简单例子：
+## 基本用法
+
+> **注意：** 必须指定样式中的宽度和高度，否则无法工作。
```html
-<template>
- <div>
- <image style="width: 560px;height: 560px;"
src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg";></image>
- </div>
-</template>
+<image style="width:500px;height:500px"
src="https://vuejs.org/images/logo.png";></image>
```
-[体验一下](http://dotwe.org/vue/1d6145d98cbdb8c66c69b4d4dcd2744d)
+参见[示例](http://dotwe.org/vue/00f4b68b3a86360df1f38728fd0b4a1f)。
-## 子组件
+## 属性
-`<image>` 组件不支持任何子组件，因此不要尝试在 `<image>` 组件中添加任何组件。如果需要实现 `background-image`
的效果，可以使用 `<image>` 组件和 `position` 定位来现实，如下面代码。
+| 属性名 | 类型 | 值 | 默认值 |
+| ------------- | ------ | -------------------------- | ------- |
+| `placeholder` | String | {URL / Base64} | - |
+| `resize` | String | conver / contain / stretch | stretch |
+| `src` | String | {URL / Base64 } | - |
-```html
-<template>
- <div>
- <image style="width:750px; height:750px;"
src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg";></image>
- <div class="title">
- <text style="font-size:50px; color: #ff0000">你好，image</text>
- </div>
- </div>
-</template>
-<style>
- .title{
- position:absolute;
- top:50;
- left:10;
- }
-</style>
-```
+> **注意：**您可以指定一个相对 bundle URL 的相对路径，相对路径将被重写为绝对资源路径(本地或远程)。参见:
[资源路径](../../guide/advanced/path.html)。
-[体验一下](http://dotwe.org/vue/0a81d27b5dbc68ea3bf5f9fd56c882e8)
+### `placeholder`
-## 特性
+占位图的 URL，当由 `src` 表示的图片下载完成并展示后将被删除。
([示例](http://dotwe.org/vue/712ef102fc5e073b6c7e3b701545681c))
-`<image>` 组件，包含 `src` 和 `resize` 两个重要特性。
+### `resize`
-- `src {string}`：定义图片链接，目前图片暂不支持本地图片。
-- `resize {string}`：可以控制图片的拉伸状态，值行为和 W3C 标准一致。
+
- 可选值为：
+- `contain`: 缩放图片以完全装入`<image>`区域，可能背景区部分空白。
([示例](http://dotwe.org/vue/89be94dcd1fec73b77246ec46c678914))
- - `stretch`：默认值，指定图片按照容器拉伸，有可能使图片产生形变。
- - `cover`：指定图片可以被调整到容器，以使图片完全覆盖背景区域，图片有可能被剪裁。
- - `contain`：指定可以不用考虑容器的大小，把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
+- `cover`: 缩放图片以完全覆盖`<image>`区域，可能图片部分看不见。
([示例](http://dotwe.org/vue/f38e311d2e6b2af87f0a65a8f37d9490))
- 例子：
+- `stretch`: `默认值`.
按照`<image>`区域的宽高比例缩放图片。([示例](http://dotwe.org/vue/f38e311d2e6b2af87f0a65a8f37d9490))
- 
+ 参见:
[`background-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size).
-- `placeholder`: <span class="api-version">v0.9+</span> <string>
当源图片下载中时显示一张占位图。
+### `src`
- [体验一下](http://dotwe.org/vue/18e71ab3484bb6751ad77ff7d5195404)
+要显示图片的 URL，该属性是 `<image>` 组件的强制属性。
-## 样式
+#### 支持的图片格式
-- 通用样式：支持所有通用样式
+Weex没有提供必须支持的图片格式列表，主要依赖于你正在使用的图片 adapter 或者 handler。例如，如果你使用
[SDWebImage](https://github.com/rs/SDWebImage#supported-image-formats)
作为iOS上的图片 handler，你可以使用像 JPEG、PNG、GIF、WebP 等图片格式。
- - 盒模型
- - `flexbox` 布局
- - `position`
- - `opacity`
- - `background-color`
+## Component 方法
- 查看 [组件通用样式](../common-style.html)
+### `save` <span class="api-version">v0.16.0+</span>
-## 事件
+保存图片内容到本地文件或相册，此操作可能需要设备相关权限。
+
+**参数**:
+
+- `callback`: {Function} 在图片被写入到本地文件或相册后调用的函数。
+ - `success`: {Boolean} 标记图片是否已写入完成。
--- End diff --
Actually, the spaces here is used to make a sub-list to identify that
`success` and `errorDesc` are parameters of the `callback`.
@CYJB has given a good advice, to point out the parameters more clearly.
> Reorganize the structure of documents and website
> -------------------------------------------------
>
> Key: WEEX-86
> URL: https://issues.apache.org/jira/browse/WEEX-86
> Project: Weex
> Issue Type: Improvement
> Components: Project
> Reporter: Hanks Zhang
> Assignee: zhengshihan
>
> h1. Weex Document Index
> + contributing.md
> + development-process.md
> + who-is-using-weex.md
> + releasenote.md
> + resources.md
> h2. Guide
> + index.md
> + advanced
> + app-architecture.md
> + downgrade.md
> + page-architecture.md
> + path.md
> + use-vuex-and-vue-router.md
> + extend-android.md
> + extend-ios.md
> + extend-js-framework.md
> + extend-web-render.md
> + front-end-frameworks.md
> + integrate-devtool-to-android.md
> + integrate-devtool-to-ios.md
> + integrate-to-your-app.md
> + set-up-env.md
> + using-rax.md
> + using-vue.md
> h2. References
> + index.md
> + android-apis.md
> + ios-apis.md
> + js-framework-apis.md
> + js-service.md
> + weex-variable.md
> h3. Components
> + a.md
> + cell.md
> + div.md
> + image.md
> + indicator.md
> + input.md
> + list.md
> + loading.md
> + refresh.md
> + scroller.md
> + slider.md
> + switch.md
> + text.md
> + textarea.md
> + video.md
> + waterfall.md
> + web.md
> h3. Modules
> + animation.md
> + clipboard.md
> + dom.md
> + globalevent.md
> + meta.md
> + modal.md
> + navigator.md
> + picker.md
> + storage.md
> + stream.md
> + websocket.md
> + webview.md
> h2. WiKi
> + color-names.md
> + common-events.md
> + common-styles.md
> + css-units.md
> + design-principles.md
> + event-bubble.md
> + faq.md
> + gestures.md
> + index.md
> + platform-difference.md
> + text-styles.md
> h2. Tools
> + helpers.md
> + index.md
> + market.md
> + toolkit.md
--
This message was sent by Atlassian JIRA
(v6.4.14#64029)
![https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"](https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"){kind=link}
![https://vuejs.org/images/logo.png"](https://vuejs.org/images/logo.png"){kind=link}