weex-nuke/lib/node_modules/nuke-image/docs/basic.md

基于 Rax 、Weex 的高性能组件体系 ~~

# 自适应/强制 设置宽高

- title_en: Adaptive / forced set width & height
- order: 0

自适应宽高、强制设置宽高

---
```js
<NukePlayGround>
  // 自适应宽高
  <Image
    autoFit={true}
    src="http://placehold.it/400x150/ff3333/ffffff"
  />

  // 强制设置宽高
  <Image
    src="https://img.alicdn.com/tps/TB1SrmcOVXXXXXFXpXXXXXXXXXX-520-280.jpg"
    style={{
        quality: 'original',
        width: 300,
        height: 200
    }}
  />
</NukePlayGround>
```
---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import Text from 'nuke-text';
import View from 'nuke-view';
import Image from 'nuke-image';
import Page from 'nuke-page';

class ImageDemo extends Component {
  constructor() {
    super();
    this.state = {
      testSrc:
        'http://img.alicdn.com/tps/TB1SrmcOVXXXXXFXpXXXXXXXXXX-520-280.jpg',
      data: [
        {
          src:
            'http://img.alicdn.com/tps/TB1SrmcOVXXXXXFXpXXXXXXXXXX-520-280.jpg'
        },
        {
          src:
            'http://img.alicdn.com/tfs/TB1xCFCPVXXXXchXXXXXXXXXXXX-160-160.gif'
        },
        {
          src: 'https://ubanner.alicdn.com/7857/4348/7461.png?getAvatar=avatar'
        },
        {
          src:
            'https://gw.alicdn.com/tps/TB12ShfQXXXXXXLapXXXXXXXXXX-1600-380.jpg',
          width: '10rem',
          height: '10rem'
        }
      ]
    };
  }
  imageArrLoadHandler = (index, e) => {
    if (!e.size) return;
    // console.log('onload', index, e.size.naturalWidth, e.size.naturalHeight);
    let newData = Object.assign([], this.state.data);
    //  > 600 以 600 为基准
    if (e.size.naturalWidth > 600) {
      newData[index].width = 600;
      newData[index].height = Math.round(
        (600 * e.size.naturalHeight) / e.size.naturalWidth
      );
    } else {
      newData[index].width = e.size.naturalWidth;
      newData[index].height = e.size.naturalHeight;
    }
    this.setState({ data: newData });
  };

  render() {
    let data = this.state.data;
    return (
      <Page title="Image">
        <Page.Intro main="use autoFit" />
        <View style={styles.item}>
          <Image
            autoFit={true}
            src="http://placehold.it/400x150/ff3333/ffffff"
            style={{
              quality: 'original'
            }}
            onPress={() => {
              alert('333');
            }}
          />
        </View>
        <Page.Intro main="set style width & height" />
        <View style={styles.item}>
          <Image
            src="https://img.alicdn.com/tps/TB1SrmcOVXXXXXFXpXXXXXXXXXX-520-280.jpg"
            style={{
              quality: 'original',
              width: 300,
              height: 200
            }}
          />
        </View>
        <Page.Intro main="use onload to calculate manually" />
        {data.map((item, index) => {
          return (
            <View style={styles.itemWrapper}>
              <View style={styles.item}>
                <Image
                  ref="testimage"
                  quality="original"
                  src={item.src}
                  style={{
                    width: item.width ? item.width : 20,
                    height: item.height ? item.height : 20,
                    quality: 'original'
                  }}
                  onLoad={e => {
                    this.imageArrLoadHandler(index, e);
                  }}
                />
              </View>
            </View>
          );
        })}
      </Page>
    );
  }
}
const styles = {
  itemWrapper: {
    margin: '30rem'
  },
  label: {
    fontSize: '28rem'
  },
  item: {
    marginTop: '30rem',
    marginBottom: '30rem',
    borderColor: '#dddddd',
    borderWidth: '1rem',
    borderStyle: 'dashed',
    height: '500rem',
    justifyContent: 'center',
    alignItems: 'center'
  },
  resize: {
    quality: 'original'
  }
};
render(<ImageDemo />);
```