Image

概述[图片]

<Image /> 是一个用来显示图片的组件。

示例代码

import cooApp, { basicWidgets } from 'coolink'

const { Image } = basicWidgets

export default class ImageItem extends cooApp.Widget {
  render () {
    return {
      <Image src="https://xxx" />
    }
  }
}

组件属性

| 属性名 | 类型 | 说明 | 默认值 | | ----------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | --- | | src | string | 图片路径 | | | placeholder | string | 占位图片路径 | | | fit | string

- 'fill'
- 'contain'
- 'cover'
- 'fitWidth'
- 'fitHeight'
- 'scaleDown'
- 'none' | 图片显示效果 | | | fadeIn | boolean | 是否开启隐藏占位图时的动画效果 | false | | onLoad | Function | 滑动时触发的滑动回调事件，具有 1 个参数

参数具有 width height 属性，表示当前图片资源的实际宽高
如果需要取得图片显示宽高，需要通过 onLayout 进行获取 | | c | | height | number | 图片高度 | 默认 fill 填充，但有些机型上会出现偏差，最好写死宽高 | | width | number | 图片宽度 | |

---

样例 1

export default class HomePage extends Widget<any, any> {
  render() {
    return (
      <Page appBar={<AppBar title="Image 图片组件" />}>
        <ScrollView>
          <Container row wrap width={ui.screenWidth}>
            <Image src="https://beta-webapp.skysrt.com/lqq/images/9.jpg" />
          </Container>
          <Container height={ui.bottomBarHeight} />
        </ScrollView>
      </Page>
    );
  }
}

上述例子的效果图：