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