Image
Based on the realization of the type of image, a better picture can be displayed using Picture components.
Install
$ npm install rax-image --save
Import
import Image from 'rax-image';
Props
name | type | default | describe |
---|---|---|---|
source | Object | '' | set image uri |
fallbackSource | Object | '' | load fallback image when source image load failed |
style | Object | '' | if picture is not set wide high default is 0x0 |
resizeMode | String | '' | Decide how to resize the image when the component size and picture size are out of proportion |
Support any custom attributes.
resizeMode supported values include:contain、cover、stretch、center、repeat
Local image sample
Before you use it, check that image-source-loader is already enabled in webpack.config.js
import {createElement, Component, render} from 'rax';
import Image from 'rax-image';
class App extends Component {
render() {
return (
<Image
source={require('./path/to/your/image.png')}
fallbackSource={{
uri: 'https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_70x70.jpg'
}}
resizeMode="cover"
/>
);
}
}
render(<App />);
URL image sample
// demo
import {createElement, Component, render} from 'rax';
import Image from 'rax-image';
class App extends Component {
render() {
return (
<Image
source={{
uri: 'https://gw.alicdn.com/tfs/TB1g6AvPVXXXXa7XpXXXXXXXXXX-215-215.png'
}}
fallbackSource={{
uri: 'https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_70x70.jpg'
}}
style={{
width: 100,
height: 100,
}}
resizeMode="cover"
/>
);
}
}
render(<App />);