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

Image

Usage no npm install needed!

<script type="module">
  import aliI18nFeIntlCompImage from 'https://cdn.skypack.dev/@ali-i18n-fe/intl-comp-image';
</script>

README

CmsImage

Using TypeScript

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