image下载 - image源代码下载

image

其他源码

v7.11.0

下载

RC图像

反应图像。

特征

安装

用法

npm install
npm start

 import Image from 'rc-image' ;

export default ( ) => (
  < Image src = "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" / >
) ;

API

姓名	类型	默认	描述
预览	布尔\| previewType	真的	是否显示预览
prefixcls	细绳	RC图像	className前缀
占位符	布尔\|反应	-	如果`true`将设置默认占位符或使用`ReactElement` SET自定义占位符
倒退	细绳	-	负载失败的SRC
PreviewPrefixCls	细绳	rc-image-preview	预览className前缀
Onerror	（事件：事件）=> void	-	负载失败的回调

previewType

姓名	类型	默认	描述
可见的	布尔	-	预览是否开放
彻底	React.ReactNode	-	自定义关闭图标
src	细绳	-	自定义预览SRC
活动	布尔	真的	启用阻力
Scalestep	数字	0.5	秤增加或减少的数量
Minscale	数字	1	最小比例
MaxScale	数字	50	最大比例
前面的人	布尔	-	强制渲染预览
GetContainer	字符串\| htmlelement \| （（）=> htmlelement）\|错误的	document.body	返回安装节点进行预览
成像人	（原始名称：React.Reactelement，信息：{transform：transformType}）=> react.reaeactnode	-	自定义图像
工具包	（原始名称：React.Reactelement，信息：省略<toolbarrenderInfotype，'Current'\|'total'total'>）=> react.reaeactnode	-	自定义工具栏
Onvisiblechange	（可见：布尔值，可见：布尔值）=> void	-	可见时回调
ontransform	{transform：transformType，Action：transformAction}	-	更改转换时回调

image.previewGroup

预览合并的SRC

 import Image from 'rc-image' ;

export default ( ) => (
  < Image . PreviewGroup >
    < Image src = "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" / >
    < Image src = "https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*P0S-QIRUbsUAAAAAAAAAAABkARQnAQ" / >
  < / Image . PreviewGroup >
) ;

API

姓名	类型	默认	描述
预览	布尔\| PreviewGrouPtype	真的	是否显示预览，当前：如果预览显示IMG索引，默认为0
PreviewPrefixCls	细绳	rc-image-preview	预览className前缀
图标	{[ICONKEY]？：REACTNODE}	-	顶部操作栏中的图标，ICONKEY：“ rotateleft'\| “旋转式” \| 'Zoomin'\| 'Zoomout'\| “关闭” \| “左” \| '正确的'
倒退	细绳	-	负载失败的SRC
项目	（字符串\| {src：string，alt：string，crossorigin：string，...}）[] []	-	预览组

PreviewGrouPtype

姓名	类型	默认	描述
可见的	布尔	-	预览是否开放
活动	布尔	真的	启用阻力
当前的	数字	-	当前索引
彻底	React.ReactNode	-	自定义关闭图标
Scalestep	数字	0.5	秤增加或减少的数量
Minscale	数字	1	最小比例
MaxScale	数字	50	最大比例
前面的人	布尔	-	强制渲染预览
GetContainer	字符串\| htmlelement \| （（）=> htmlelement）\|错误的	document.body	返回安装节点进行预览
乡村	（当前：数字，总数：数字）=> React Node	-	自定义计数
成像人	（原始名称：React.Reactelement，Info：{transformtype，current：nustry}）=> react.reaeactnode	-	自定义图像
工具包	（原始名称：React.Reactelement，信息：ToolbarrenderInfotype）=> react.Reactnode	-	自定义工具栏
Onvisiblechange	（可见：布尔值，可见：布尔值，当前：数字）=> void	-	可见时回调
ontransform	{transform：transformType，Action：transformAction}	-	更改转换时回调

transformType

 {
  x: number ;
  y: number ;
  rotate: number ;
  scale: number ;
  flipX: boolean ;
  flipY: boolean ;
}

变换

 type TransformAction =
  | 'flipY'
  | 'flipX'
  | 'rotateLeft'
  | 'rotateRight'
  | 'zoomIn'
  | 'zoomOut'
  | 'close'
  | 'prev'
  | 'next'
  | 'wheel'
  | 'doubleClick'
  | 'move'
  | 'dragRebound' ;

ToolbarrenderInfotype

 {
  icons: {
    prevIcon ?: React . ReactNode ;
    nextIcon?: React . ReactNode ;
    flipYIcon: React . ReactNode ;
    flipXIcon: React . ReactNode ;
    rotateLeftIcon: React . ReactNode ;
    rotateRightIcon: React . ReactNode ;
    zoomOutIcon: React . ReactNode ;
    zoomInIcon: React . ReactNode ;
  } ;
  actions: {
    onActive ?: ( offset : number ) => void ;
    onFlipY : ( ) => void ;
    onFlipX : ( ) => void ;
    onRotateLeft : ( ) => void ;
    onRotateRight : ( ) => void ;
    onZoomOut : ( ) = > void ;
    onZoomIn : ( ) = > void ;
    onClose : ( ) = > void ;
    onReset : ( ) = > void ;
  } ;
  transform: {
    x: number ;
    y: number ;
    rotate: number ;
    scale: number ;
    flipX: boolean ;
    flipY: boolean ;
  } ,
  current: number ;
  total: number ;
}