Download image - Download do código fonte image

image

Outro código-fonte

v7.11.0

Baixar

RC-Image

Reactar a imagem.

Recurso

instalar

Uso

npm install
npm start

 import Image from 'rc-image' ;

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

API

Nome	Tipo	Padrão	Descrição
visualização	booleano \| VisuewType	verdadeiro	Se deve mostrar a pré -visualização
Prefixcls	corda	RC-Image	ClassName Prefix
espaço reservado	booleano \| ReatElement	-	Se `true` definirá o espaço reservado padrão ou usará `ReactElement` Set Personalizar espaço reservado
cair pra trás	corda	-	Falha na carga SRC
VisuewPrefixCls	corda	RC-Image-Preview	Visualize ClassName Prefix
OnError	(Evento: Evento) => Void	-	Carga falhou em retorno de chamada

VisuewType

Nome	Tipo	Padrão	Descrição
visível	booleano	-	Se a pré -visualização está aberta ou não
Closeicon	React.reactNode	-	Ícone de Fechar Custom
src	corda	-	Personalize o Visualizar SRC
móvel	booleano	verdadeiro	Ativar arrasto
scalestep	número	0,5	O número para o qual a escala é aumentada ou diminuída
MinScale	número	1	Escala min
MaxScale	número	50	Escala máxima
forcender	booleano	-	Visualização de renderização da força
getContainer	string \| Htmlelement \| (() => Htmlelement) \| falso	document.body	Devolver o nó de montagem para visualização
imagender	(OriginalNode: React.ReactElement, Info: {Transform: TransformType}) => React.ReactNode	-	Personalize a imagem
ToolBarrender	(OriginalNode: React.ReactElement, Info: omit <ToolBarrenderInfotype, 'Current' \| 'Total'>) => React.ReactNode	-	Personalize a barra de ferramentas
onvisiblechange	(visível: booleano, previstível: booleano) => vazio	-	Retorno de chamada quando visível é alterado
OnTransform	{Transform: TransformType, Ação: Transformaction}	-	Retorno de chamada quando a transformação é alterada

Image.PreviewGroup

Visualize o SRC mesclado

 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

Nome	Tipo	Padrão	Descrição
visualização	booleano \| VisuewGRouptype	verdadeiro	Se deve mostrar a pré -visualização, Corrente: se visualizar o índice do show IMG, padrão 0
VisuewPrefixCls	corda	RC-Image-Preview	Visualize ClassName Prefix
ícones	{[iconkey]?: ReactNode}	-	Ícones na barra de operação superior, iconkey: 'rotateleft' \| 'Rotateright' \| 'Zoomin' \| 'Zoomout' \| 'Fechar' \| 'Esquerda' \| 'certo'
cair pra trás	corda	-	Falha na carga SRC
Unid	(String \| {src: string, alt: string, crossorigin: string, ...}) []	-	Grupo de visualização

VisuewGRouptype

Nome	Tipo	Padrão	Descrição
visível	booleano	-	Se a pré -visualização está aberta ou não
móvel	booleano	verdadeiro	Ativar arrasto
atual	número	-	Índice atual
Closeicon	React.reactNode	-	Ícone de Fechar Custom
scalestep	número	0,5	O número para o qual a escala é aumentada ou diminuída
MinScale	número	1	Escala min
MaxScale	número	50	Escala máxima
forcender	booleano	-	Visualização de renderização da força
getContainer	string \| Htmlelement \| (() => Htmlelement) \| falso	document.body	Devolver o nó de montagem para visualização
campo	(atual: número, total: número) => reactNode	-	Personalize a contagem
imagender	(OriginalNode: React.ReactElement, Info: {Transform: TransformType, Current: Number}) => React.ReactNode	-	Personalize a imagem
ToolBarrender	(OriginalNode: React.ReactElement, Info: ToolBarrenderInfotype) => React.ReactNode	-	Personalize a barra de ferramentas
onvisiblechange	(visível: booleano, previstível: booleano, atual: número) => void	-	Retorno de chamada quando visível é alterado
OnTransform	{Transform: TransformType, Ação: Transformaction}	-	Retorno de chamada quando a transformação é alterada

TransformType

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

Transformation

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