# Image Demo

* order: 1

resize mode 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 = {
      testSrc:
        'https://img.alicdn.com/tfs/TB12UujSVXXXXbAXVXXXXXXXXXX-820-546.jpg'
    };
  }

  render() {
    let data = this.state.data;
    return (
      <Page title="Image">
        <Page.Intro main="contain" />
        <View style={styles.itemWrapper}>
          <View style={styles.item}>
            <Image
              resizeMode="contain"
              src={this.state.testSrc}
              style={styles.resize}
            />
          </View>
        </View>
        <Page.Intro main="cover" />
        <View style={styles.itemWrapper}>
          <View style={styles.item}>
            <Image
              resizeMode="cover"
              src={this.state.testSrc}
              style={styles.resize}
            />
          </View>
        </View>

        <Page.Intro main="stretch" />
        <View style={styles.itemWrapper}>
          <View style={styles.item}>
            <Image
              resizeMode="stretch"
              src={this.state.testSrc}
              style={styles.resize}
            />
          </View>
        </View>
      </Page>
    );
  }
}
const styles = {
  itemWrapper: {
    margin: '30rem'
  },
  label: {
    fontSize: '28rem'
  },
  item: {
    marginTop: '30rem',
    marginBottom: '30rem',
    borderColor: '#dddddd',
    borderWidth: '1rem',
    borderStyle: 'dashed',
    backgroundColor: 'red',
    height: 650
  },
  resize: {
    flex: 1,
    backgroundColor: '#fff8da'
  }
};
render(<ImageDemo />);
```