Image 图片

API#

  • 类似于web img标签

Image#

属性 说明 类型 默认值
source 设置图片的 uri,格式{uri: '//img.alicdn.com/image.png'} object
style 必须设置宽高,否则默认为0,{width: '100rem',height: '100rem'} object {width: '0',height: '0'}
resizeMode 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。 string cover

代码演示


/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text,Image} from 'nuke-components';
import {mount} from 'nuke-mounter';


let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
    }

    render() {
        return (
            <View style={{height:'200rem'}}>
                <Image source={{uri: '//img.alicdn.com/tps/TB1l8ZsNpXXXXaQXVXXXXXXXXXX-160-280.jpg'}} style={{width: '160rem',height: '280rem',}} resizeMode={'cover'}/>

            </View>
        )
    }
}

mount(<App/>, mountNode);

普通按钮。

mobile phone header