[GitHub] incubator-weex-site pull request #4: [WEEX-86][doc] Update image component's...

[jondong]

Github user jondong commented on a diff in the pull request:

    https://github.com/apache/incubator-weex-site/pull/4#discussion_r147028591
  
    --- Diff: source/references/components/image.md ---
    @@ -6,122 +6,146 @@ order: 8.02
     version: 2.1
     ---
     
    -# <image>
    +`<image>` is used to display a single image in your interface.
     
    -### Summary
    +> **Note:**  `<img>` element which is usually used in HTML is not 
supported in Weex, you should use `<image>` instead.
     
    -`image` tag is used to render a specified picture, and it shouldn't 
contain any child component. `<img>` is not supported currently.
    +> **Note:**  Weex doesn't have built-in image downloader, as relevant 
download, cache, decompression mechanisms are very complicated and some open 
sourced tools such as [SDWebImage](https://github.com/rs/SDWebImage) have 
handled well, 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).
     
    -**Notes:** the styles of `width` and `height` should be specified, 
otherwise it won't work.
    +## Basic Usage
     
    +> **Note:** the styles of `width` and `height` must be specified, 
otherwise it won't work.
     
    -### Child Components
    +```html
    +<image style="width:500px;height:500px" 
src="https://vuejs.org/images/logo.png";></image>
    +```
    +
    +See the [example](http://dotwe.org/vue/00f4b68b3a86360df1f38728fd0b4a1f).
    +
    +  ## Attributes
    +
    +| Attribute     | Type   | Value                      | Default Value |
    +| ------------- | ------ | -------------------------- | ------------- |
    +| `placeholder` | String | {URL / Base64}             | -             |
    +| `resize`      | String | conver / contain / stretch | stretch       |
    +| `src`         | String | {URL / Base64 }            | -             |
    +
    +  > **Note:** you can specify a URL which is relative to bundle URL for 
`src` and `placeholder`, rel       ative URL will be rewritten to the real 
resource URL (local or remote). See also: 
[Path](../../guide/advanced/path.html).
    +
    +  ### `placeholder`
    +
    +  A URL value for image placeholder. It will be displayed when the image 
view is empty and will be removed when the image represented by `src` is 
loaded. [(Example)](http://dotwe.org/vue/712ef102fc5e073b6c7e3b701545681c)
    +
    +  ### `resize`
    +
    +![image resize property](../images/image-resize-property.png)
     
    -This component supports no child components.
    +-   `contain`: Scales the image as large as possible without cropping or 
stretching the image. Any remaining area of bounds is transparent 
([Example](http://dotwe.org/vue/89be94dcd1fec73b77246ec46c678914))
    +- `cover`: Scales the image as large as possible without stretching the 
image. If the proportions of the image differ from the element, it is cropped 
either vertically or horizontally so that no empty space remains.  
([Example](http://dotwe.org/vue/f38e311d2e6b2af87f0a65a8f37d9490))
    --- End diff --
    
    without stretching it.



---