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

이름	유형	기본	설명
시사	부울 \| 미리보기 유형	진실	미리보기를 표시할지 여부
접두사	끈	RC- 이미지	ClassName Prefix
자리 표시 자	부울 \| 반응	-	`true` 가 기본 자리 표시자를 설정하거나 `ReactElement` Set Set Customize 자리 표시자를 설정합니다.
폴백	끈	-	로드 실패 SRC
previewprefixcls	끈	RC-Image-preview	미리보기 클래스 이름 접두사
오류	(이벤트 : 이벤트) => void	-	로드 실패 콜백

미리보기 유형

이름	유형	기본	설명
보이는	부울	-	미리보기가 열려 있는지 여부
Closeicon	React.reactNode	-	사용자 정의 닫기 아이콘
SRC	끈	-	미리보기 SRC를 사용자 정의하십시오
움직일 수 있는	부울	진실	드래그 활성화
Scalestep	숫자	0.5	스케일이 증가하거나 감소하는 수
MinScale	숫자	1	최소 스케일
맥스 스케일	숫자	50	최대 스케일
Forcerender	부울	-	힘 렌더 미리보기
GetContainer	문자열 \| htmlelement \| (() => htmlelement) \| 거짓	Document.body	미리보기를 위해 마운트 노드를 반환하십시오
이미저 렌더	(OriginalNode : React.ReactElement, info : {transform : transformType}) => react.reactNode	-	이미지를 사용자 정의하십시오
도구 바렌더	(OriginalNode : React.ReactElement, Info : avit <ToolbarrenderInfotype, 'current'\| 'total'>) => react.reactNode	-	도구 모음을 사용자 정의합니다
onvisibleChange	(가시 : 부울, 이전 Visible : boolean) => 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	진실	미리보기 표시 여부, 현재 : Show IMG 색인, 기본 0을 미리 봅니다
previewprefixcls	끈	RC-Image-preview	미리보기 클래스 이름 접두사
아이콘	{[iConkey]? : ReactNode}	-	상단 작동 막대의 아이콘, 아이콘 키 : 'Rotateleft'\| 'Rotateright'\| '줌'\| 'Zoomout'\| '닫기'\| '왼쪽'\| '오른쪽'
폴백	끈	-	로드 실패 SRC
항목	(문자열 \| {src : String, alt : String, Crossorigin : String, ...}) []	-	미리보기 그룹

previewgrouptype

이름	유형	기본	설명
보이는	부울	-	미리보기가 열려 있는지 여부
움직일 수 있는	부울	진실	드래그 활성화
현재의	숫자	-	현재 색인
Closeicon	React.reactNode	-	사용자 정의 닫기 아이콘
Scalestep	숫자	0.5	스케일이 증가하거나 감소하는 수
MinScale	숫자	1	최소 스케일
맥스 스케일	숫자	50	최대 스케일
Forcerender	부울	-	힘 렌더 미리보기
GetContainer	문자열 \| htmlelement \| (() => htmlelement) \| 거짓	Document.body	미리보기를 위해 마운트 노드를 반환하십시오
Countrender	(현재 : 숫자, 총 : 숫자) => reactnode	-	카운트를 사용자 정의하십시오
이미저 렌더	(OriginalNode : React.ReactElement, Info : {Transform : transformType, current : number}) => React.ReactNode	-	이미지를 사용자 정의하십시오
도구 바렌더	(OriginalNode : React.ReactElement, Info : ToolBarrenderInfotype) => React.ReactNode	-	도구 모음을 사용자 정의합니다
onvisibleChange	(가시 : 부울, prevvisible : boolean, current : number) => 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 ;
}