Téléchargement image - Téléchargement du code source image

image

Autre code source

v7.11.0

Télécharger

Image RC

Réagir l'image.

Fonctionnalité

installer

Usage

npm install
npm start

 import Image from 'rc-image' ;

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

API

Nom	Taper	Défaut	Description
prévisualisation	booléen \| Aperçu	vrai	S'il faut afficher l'aperçu
prefixcls	chaîne	Image RC	ClassName Prefix
espace réservé	booléen \| Réactualité	-	Si `true` définira l'espace réservé par défaut ou utilise le `ReactElement` personnaliser l'espace réservé
retomber	chaîne	-	La charge a échoué Src
préviewprefixcls	chaîne	RC-IMAGE-PREVIEW	Prévisualisation préfixe de nom de classe
onerror	(événement: événement) => void	-	Chargez le rappel raté

Aperçu

Nom	Taper	Défaut	Description
visible	booléen	-	Si l'aperçu est ouvert ou non
fermeture	React.reactnode	-	Icône de fermeture personnalisée
SRC	chaîne	-	Personnaliser l'aperçu SRC
mobile	booléen	vrai	Activer la traînée
écaillette	nombre	0,5	Le nombre auquel l'échelle est augmentée ou diminuée
à l'échelle minimale	nombre	1	Échelle min
maxscale	nombre	50	Échelle maximale
forcer	booléen	-	Aperçu des rendements de force
GetContainer	String \| Htmlelement \| (() => Htmlelement) \| FAUX	document.body	Renvoyez le nœud de montage pour l'aperçu
imagentinder	(originalNode: react.reactElement, info: {transform: transformype}) => react.reactnode	-	Personnaliser l'image
barbe à outils	(OriginalNode: react.reactElement, Info: Omit <ToolbarRenderiNfotype, 'Current' \| 'Total'>) => react.reactNode	-	Personnaliser la barre d'outils
onvisiblechange	(Visible: booléen, prévisible: booléen) => void	-	Rappel lorsque visible est modifié
onTransform	{transform: transformype, action: transformaction}	-	Rappel lorsque la transformation est modifiée

Image.previewgroup

Aperçu du SRC fusionné

 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

Nom	Taper	Défaut	Description
prévisualisation	booléen \| PréviewgroupType	vrai	S'il faut montrer l'aperçu, Current: Si vous prévisualisez l'index IMG Afficher, par défaut 0
préviewprefixcls	chaîne	RC-IMAGE-PREVIEW	Prévisualisation préfixe de nom de classe
icônes	{[iconKey] ?: ReactNode}	-	Icônes dans la barre de fonctionnement supérieure, iconkey: «Rotateleft» \| 'Rotateright' \| 'Zoom' \| 'Zoomout' \| 'Close' \| 'gauche' \| 'droite'
retomber	chaîne	-	La charge a échoué Src
articles	(String \| {src: string, alt: string, crossorigin: string, ...}) []	-	groupe de prévisualisation

PréviewgroupType

Nom	Taper	Défaut	Description
visible	booléen	-	Si l'aperçu est ouvert ou non
mobile	booléen	vrai	Activer la traînée
actuel	nombre	-	Index actuel
fermeture	React.reactnode	-	Icône de fermeture personnalisée
écaillette	nombre	0,5	Le nombre auquel l'échelle est augmentée ou diminuée
à l'échelle minimale	nombre	1	Échelle min
maxscale	nombre	50	Échelle maximale
forcer	booléen	-	Aperçu des rendements de force
GetContainer	String \| Htmlelement \| (() => Htmlelement) \| FAUX	document.body	Renvoyez le nœud de montage pour l'aperçu
pays	(Current: Numéro, total: nombre) => reactNode	-	Personnaliser le nombre
imagentinder	(OriginalNode: react.reactElement, info: {transform: transformype, courant: numéro}) => react.reactNode	-	Personnaliser l'image
barbe à outils	(OriginalNode: react.reactElement, Info: ToolarRendeRenfotype) => react.reactnode	-	Personnaliser la barre d'outils
onvisiblechange	(Visible: booléen, prévisible: booléen, courant: nombre) => void	-	Rappel lorsque visible est modifié
onTransform	{transform: transformype, action: transformaction}	-	Rappel lorsque la transformation est modifiée

Transformype

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

Barrande à outils

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