# 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 = {
      left: 40,
      top: 50
    };
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        left: 400,
        top: 500
      });
    }, 3000);
  }

  render() {
    let data = this.state.data;
    return (
      <Page title="Image">
        <Page.Intro main="calculate size" />

        <View style={styles.item}>
          <Image
            autoFit={true}
            src="https://img.alicdn.com/tps/TB1SrmcOVXXXXXFXpXXXXXXXXXX-520-280.jpg"
            style={{
              quality: 'original'
            }}
          />
        </View>
        <Page.Intro main="qa" />
        <Image
          src="https://img.alicdn.com/bao/uploaded/i3/2256639411/TB1AlV.nVGWBuNjy0FbXXb4sXXa_!!2256639411-0-item_pic.jpg"
          style={{ height: 220, width: 220 }}
          width="220"
          height="220"
          resizeMode="cover"
        />
      </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 />);
```