You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@weex.apache.org by GitBox <gi...@apache.org> on 2018/12/25 02:47:34 UTC
[GitHub] YorkShen closed pull request #267: * [Android] Update Image.md

YorkShen closed pull request #267: * [Android] Update Image.md
URL: https://github.com/apache/incubator-weex-site/pull/267
 
 
   

This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:

As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):

diff --git a/source/cn/references/components/image.md b/source/cn/references/components/image.md
index f4d9e5f66..67e84d114 100644
--- a/source/cn/references/components/image.md
+++ b/source/cn/references/components/image.md
@@ -8,15 +8,15 @@ version: 2.1
 
 `<image>` 用于在界面中显示单个图片。
 
-> **注意：**在HTML中通常使用的 `<img>` 标签在 Weex 中不支持，你应该使用`<image>` 。
+> **注意:** 在代码中请使用 `<image>` 标签, `<img>` 的存在只是因为兼容性原因，在将来的版本中可能删除。
 
-> **注意：** Weex 没有内置的图片下载器，因为相关的下载、缓存、解码机制非常复杂，一些开源的工具如 [SDWebImage](https://github.com/rs/SDWebImage) 已经处理得很好， 所以在使用 `<image>` 之前，请在 native 侧先接入相应的 adapter 或者 handler。
+> **注意：** Weex 没有内置的图片库，因为一些开源项目如 [SDWebImage](https://github.com/rs/SDWebImage) 和[Picasso](https://github.com/square/picasso)已经能很好的解决这个问题， 所以在使用 `<image>` 之前，请在 native 侧先接入相应的 adapter 或者 handler。
 >
 > 参见:  [Android adapter](../android-apis.html#Adapter) 和 [iOS handler](../ios-apis.html#Handler-like-Android-Adapter)。
 
 ## 基本用法
 
-> **注意：** 必须指定样式中的宽度和高度，否则无法工作。
+> **注意：** `width`, `height` 和 `src`必须被提供，否则图片无法渲染。
 
 ```html
 <image style="width:500px;height:500px" src="https://vuejs.org/images/logo.png"></image>
@@ -24,6 +24,12 @@ version: 2.1
 
 参见[示例](http://dotwe.org/vue/00f4b68b3a86360df1f38728fd0b4a1f)。
 
+## 子组件
+`<image>`不支持子组件。
+
+## 样式
+支持**[通用样式](../../wiki/common-styles.html)**。
+
 ## 属性
 
 | 属性名           | 类型     | 值                          | 默认值     |
@@ -36,7 +42,7 @@ version: 2.1
 
 ### `placeholder`
 
-占位图的 URL，当由 `src` 表示的图片下载完成并展示后将被删除。 ([示例](http://dotwe.org/vue/712ef102fc5e073b6c7e3b701545681c))
+占位图的 URL，在图片下载过程中将展示占位图，图片下载完成后将显示`src`中指定的图片。 ([示例](http://dotwe.org/vue/712ef102fc5e073b6c7e3b701545681c))
 
 ### `resize`
 
@@ -46,7 +52,7 @@ version: 2.1
 - `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).
+resize属性和[`background-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)的理念很相似。
 
 ### `src`
 
@@ -56,6 +62,8 @@ version: 2.1
 
 Weex没有提供必须支持的图片格式列表，主要依赖于你正在使用的图片 adapter 或者 handler。例如，如果你使用 [SDWebImage](https://github.com/rs/SDWebImage#supported-image-formats) 作为iOS上的图片 handler，你可以使用像 JPEG、PNG、GIF、WebP 等图片格式。
 
+> **Note:** Android 默认的Image Adapter不支持 gif。
+
 ## Component 方法
 
 ### `save` <span class="api-version">v0.16.0+</span>
@@ -138,10 +146,6 @@ export default {
 
 参见[完整示例](http://dotwe.org/vue/94de9307517240dec066d2ea57fe54a0)。
 
-## 样式
-
-支持**[通用样式](../../wiki/common-styles.html)**。
-
 ## 使用说明
 
 - 在使用 `<image>` 之前，请在 native 侧先接入相应的 adapter 或者 handler。
@@ -150,6 +154,5 @@ export default {
 
 ## 示例
 
-- [Base64 示例](http://dotwe.org/vue/ba477790c85ea12bbf7ad3a5f0885b5c)
-- [Multi-layer images 示例](http://dotwe.org/vue/c44359c0f200abc1f66504b88587e4f6)
-- [Lazy load image 示例](http://dotwe.org/vue/b0b146e4e6fa4890f800e18cb950f803)
+* [Base64 示例](http://dotwe.org/vue/ba477790c85ea12bbf7ad3a5f0885b5c)
+* [Lazy load image 示例](http://dotwe.org/vue/b0b146e4e6fa4890f800e18cb950f803)
diff --git a/source/references/components/image.md b/source/references/components/image.md
index 7b688abf8..612f61cd6 100644
--- a/source/references/components/image.md
+++ b/source/references/components/image.md
@@ -8,15 +8,16 @@ version: 2.1
 
 `<image>` is used to display a single image in your interface.
 
-> **Note:**  `<img>` element which is usually used in HTML is not supported in Weex, you should use `<image>` instead.
+> **Note:** Always use `<image>` in your code, as `<img>` exists only for backward compatibility reasons and may removed in the future release.
 
-> **Note:**  Weex doesn't have built-in image downloader, as download, cache, decompression features are complicated and some open source tools like  [SDWebImage](https://github.com/rs/SDWebImage) handles it well, so please add native image adapter/handler before using `<image>`.
+> **Note:**  Weex doesn't have built-in library for image downloading and caching, as there are some great open source library like  [SDWebImage in iOS](https://github.com/rs/SDWebImage) and [Picasso in Android](https://github.com/square/picasso) handling these problem, so please add native image adapter/handler before using `<image>`.
 >
 > See also:  [Android adapter](../android-apis.html#Adapter) and [iOS handler](../ios-apis.html#Handler-like-Android-Adapter).
 
 ## Basic Usage
 
-> **Note:** the style attributes of `width` and `height` must be specified, otherwise it won't work.
+> **Note:** the style of `width`, `height` and `src` must be specified, otherwise it will load nothing.
+
 
 ```html
 <image style="width:500px;height:500px" src="https://vuejs.org/images/logo.png"></image>
@@ -24,7 +25,14 @@ version: 2.1
 
 See the [example](http://dotwe.org/vue/00f4b68b3a86360df1f38728fd0b4a1f).
 
-  ## Attributes
+## Child
+`<image>` doesn't support any child component.
+
+## Styles
+
+Support **[common styles](../../wiki/common-styles.html)**.
+
+## Attributes
 
 | Attribute     | Type   | Value                      | Default Value |
 | ------------- | ------ | -------------------------- | ------------- |
@@ -34,11 +42,11 @@ See the [example](http://dotwe.org/vue/00f4b68b3a86360df1f38728fd0b4a1f).
 
   > **Note:** you can specify a relative URL  for `src` and `placeholder`, relative URL will be rewritten to the to the actual resource URL (local or remote). See also: [Path](../../guide/advanced/path.html).
 
-  ### `placeholder`
+### placeholder
 
-A URL value for placeholder image. It will be displayed when the image view is empty and will be replaced as soon as the 'src' image gets loaded.[(Example)](http://dotwe.org/vue/712ef102fc5e073b6c7e3b701545681c)
+A URL value for placeholder image. It will be displayed during image downloading and replaced as soon as the image gets loaded.[(Example)](http://dotwe.org/vue/712ef102fc5e073b6c7e3b701545681c)
 
-  ### `resize`
+### resize
 
 ![image resize property](../images/image-resize-property.png)
 
@@ -49,9 +57,9 @@ A URL value for placeholder image. It will be displayed when the image view is e
 
 -   `stretch`: `Default value`. Scales the content to fit the size of the element itself by changing the aspect ratio of the image if necessary. ([Example](http://dotwe.org/vue/f38e311d2e6b2af87f0a65a8f37d9490))
 
-See also: [`background-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size).
+`resize` property is similar to [`background-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size).
 
-### `src`
+### src
 
 The URL of the image to display. This attribute is mandatory for the `<image>` component.
 
@@ -59,6 +67,8 @@ The URL of the image to display. This attribute is mandatory for the `<image>` c
 
 Weex doesn't give a list of image formats that must be supported, it mainly relies on the image adapter/handler you are using. For example, if you are using [SDWebImage](https://github.com/rs/SDWebImage#supported-image-formats) as the image adapter on iOS, you can use image formats like JPEG, PNG, GIF, WebP, etc.
 
+> **Note:** The default image adapter on Android doesn't support gif.
+
 ## Component Methods
 
 ### `save` <span class="api-version">v0.16.0+</span>
@@ -90,10 +100,10 @@ Get the component reference and use the `save` method:
 const $image = this.$refs.poster
 $image.save(result => {
   if (result.success) {
-    // Do something to hanlde success
+    // Do something to handle success
   } else {
     console.log(result.errorDesc)
-    // Do something to hanlde failure
+    // Do something to handle failure
   }
 })
 ```
@@ -139,18 +149,6 @@ export default {
 
 Complete example goes [here](http://dotwe.org/vue/94de9307517240dec066d2ea57fe54a0).
 
-## Styles
-
-Support **[common styles](../../wiki/common-styles.html)**.
-
-## Usage Notes
-
-- Add image adapter/handler before using `<image>`
-- The `width` and `height` in the styles of `<image>` must be specified.
-- `<image>` can not have any nested child component.
-
 ## Examples
-
-- [Base64 example](http://dotwe.org/vue/ba477790c85ea12bbf7ad3a5f0885b5c)
-- [Multi-layer images example](http://dotwe.org/vue/c44359c0f200abc1f66504b88587e4f6)
-- [Lazy load image example](http://dotwe.org/vue/b0b146e4e6fa4890f800e18cb950f803)
+* [Base64 example](http://dotwe.org/vue/ba477790c85ea12bbf7ad3a5f0885b5c)
+* [Lazy load image example](http://dotwe.org/vue/b0b146e4e6fa4890f800e18cb950f803)


 

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services