# Image Demo

* order: 0
* hide: true

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

---

```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 = {
      data: [
        {
          src:
            'http://img.alicdn.com/tps/TB1SrmcOVXXXXXFXpXXXXXXXXXX-520-280.jpg'
        }
      ]
    };
  }
  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="calculate size" />

        {data.map((item, index) => {
          console.log(item.width, item.height);
          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 />);
```