@ali-i18n-fe/intl-comp-image NPM

CmsImage

Preview

npm.io

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

lodash

@everything-registry/sub-chunk-43 @ali-i18n-fe/dada-cli @ali-i18n-fe/dada-component @infinitebrahmanuniverse/nolb-_ali-@ewtp-dada/ewtp-dada-cli

1.0.14

5 years ago