CmsImage

Preview

Demo

Click to view demo

Usage

import Components from '@alife/intl-comp-image';
import React from 'react';
import ReactDOM from 'react-dom';

import '@alife/intl-comp-image/dist/index.css';

const Component = Components;

ReactDOM.render(
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <Component width={200} height={200} src="https://img.alicdn.com/tfs/TB1FQjmef1H3KVjSZFBXXbSMXXa-291-163.png" />
      <Component
        width={400}
        height={200}
        mode={'aspectFit'}
        src="https://img.alicdn.com/tfs/TB1FQjmef1H3KVjSZFBXXbSMXXa-291-163.png"
      />
      <br />
      <Component
        width={600}
        height={200}
        mode={'aspectFill'}
        src="https://img.alicdn.com/tfs/TB1jHkBmNv1gK0jSZFFXXb0sXXa-1440-343.png"
      />
      <Component
        width={600}
        height={200}
        mode={'aspectFill'}
        src="https://img.alicdn.com/tfs/TB1Y_XacrY1gK0jSZTEXXXDQVXa-1416-813.png"
      />
    </div>,
    mountNode,
  );

Props

property | propType | default | description :------: | :------: | :-----: | ----------- src | string | | image src height | string / number | auto | image height width | string / number | auto | image width maxHeight | number | | 图片最大高度 maxWidth | number | | 图片最大宽度 href | string | | 图片点击跳转地址jump url when clicking image mode | "scaleToFill" / "aspectFit" / "aspectFill" | scaleToFill | mode for imagescaleToFill 不保持纵横比缩放，使图片的宽高完全拉伸至填满 image 元素aspectFit 保持纵横比缩放，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来aspectFill 保持纵横比缩放，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取widthFix 宽度不变，高度自动变化，保持原图宽高比不变 style | CSSProperties | |
className | string | |
target | string | _blank | the way for jumping

Development

install

yarn

start project

yarn start

build npm package

yarn babel

build umd package

yarn build