Descarga image - Descargar el código fuente image

image

Otro código fuente

v7.11.0

Descargar

RC-IMAGE

Reaccionar imagen.

Característica

instalar

Uso

npm install
npm start

 import Image from 'rc-image' ;

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

API

Nombre	Tipo	Por defecto	Descripción
avance	booleano \| View ViewType	verdadero	Si mostrar una vista previa
prefixcls	cadena	RC-IMAGE	Prefijo de nombre de clase
marcador de posición	booleano \| Reactelación	-	Si `true` establecerá un marcador de posición predeterminado o use `ReactElement` set personalizar el marcador de posición
retroceder	cadena	-	Carga fallida src
PreviewPrefixCls	cadena	RC-IMAGE-Preview	Vista previa del prefijo de nombre de clase
onderror	(evento: evento) => nulo	-	Carga de devolución de llamada fallida

View ViewType

Nombre	Tipo	Por defecto	Descripción
visible	booleano	-	Si la vista previa está abierta o no
timbre	React.reactnode	-	Icono de cierre personalizado
SRC	cadena	-	Personalizar la vista previa SRC
móvil	booleano	verdadero	Habilitar arrastre
escalón	número	0.5	El número al que aumenta o disminuye la escala
mínimo	número	1	Escala mínima
escala máxima	número	50	Escala máxima
contador	booleano	-	Vista previa de Force Render
getContainer	cadena \| Htmlelement \| (() => Htmlelement) \| FALSO	Document.body	Devuelve el nodo de montaje para la vista previa
imaginender	(OriginalNode: React.reactelement, Info: {Transform: TransformType}) => React.reactnode	-	Personalizar la imagen
avalora de herramientas	(OriginalNode: React.Reactelement, Info: Omit <ToolBarrenderInfotype, 'Current' \| 'Total'>) => React.reactnode	-	Personalizar la barra de herramientas
OnvisibleChange	(Visible: booleano, Prevvisible: boolean) => void	-	Devolución de llamada cuando se cambia visible
ontransform	{Transform: TransformType, Action: TransformAction}	-	Devolución de llamada cuando se cambia la transformación

Image.PreviewGroup

Vista previa del SRC fusionado

 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

Nombre	Tipo	Por defecto	Descripción
avance	booleano \| Vista previa	verdadero	Si mostrar una vista previa, Actual: si Vista previa del índice Show IMG, predeterminado 0
PreviewPrefixCls	cadena	RC-IMAGE-Preview	Vista previa del prefijo de nombre de clase
íconos	{[iconkey]?: Reactnode}	-	Íconos en la barra de operación superior, Iconkey: 'Rotateleft' \| 'Rotateright' \| 'Zoomin' \| 'Zoomout' \| 'Cerrar' \| 'Izquierda' \| 'bien'
retroceder	cadena	-	Carga fallida src
elementos	(String \| {src: string, alt: string, CrossOrigin: String, ...}) []	-	grupo de vista previa

Vista previa

Nombre	Tipo	Por defecto	Descripción
visible	booleano	-	Si la vista previa está abierta o no
móvil	booleano	verdadero	Habilitar arrastre
actual	número	-	Índice actual
timbre	React.reactnode	-	Icono de cierre personalizado
escalón	número	0.5	El número al que aumenta o disminuye la escala
mínimo	número	1	Escala mínima
escala máxima	número	50	Escala máxima
contador	booleano	-	Vista previa de Force Render
getContainer	cadena \| Htmlelement \| (() => Htmlelement) \| FALSO	Document.body	Devuelve el nodo de montaje para la vista previa
país	(actual: número, total: número) => reactnode	-	Personalizar el recuento
imaginender	(OriginalNode: React.reactelement, Info: {Transform: TransformType, Current: Number}) => React.reactnode	-	Personalizar la imagen
avalora de herramientas	(OriginalNode: React.Reactelement, Info: ToolBarrenderInfotype) => React.reactnode	-	Personalizar la barra de herramientas
OnvisibleChange	(Visible: Boolean, Prevvisible: Boolean, actual: número) => void	-	Devolución de llamada cuando se cambia visible
ontransform	{Transform: TransformType, Action: TransformAction}	-	Devolución de llamada cuando se cambia la transformación

Transformtype

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

Transformación

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

Tool BarrenderInfotype

 {
  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 ;
}