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

名前	タイプ	デフォルト	説明
プレビュー	boolean \|プレビュータイプ	真実	プレビューを表示するかどうか
prefixcls	弦	RCイメージ	classNameプレフィックス
プレースホルダー	boolean \| Reactelement	-	`true`がデフォルトのプレースホルダーを設定する場合、または`ReactElement`セットを使用する場合、プレースホルダーをカスタマイズします
後退する	弦	-	失敗したsrc
previewprefixcls	弦	RC-Image-Preview	プレビューclassNameプレフィックス
onerror	（イベント：イベント）=> void	-	失敗したコールバックを読み込みます

プレビュータイプ

名前	タイプ	デフォルト	説明
見える	ブール	-	プレビューが開いているかどうか
Closeicon	React.Reactnode	-	カスタムクローズアイコン
SRC	弦	-	プレビューSRCをカスタマイズします
可動式	ブール	真実	ドラッグを有効にします
scalestep	番号	0.5	スケールの増加または減少の数
ミンスケール	番号	1	最小スケール
マックススケール	番号	50	最大スケール
forcerender	ブール	-	強制レンダリングプレビュー
GetContainer	文字列\| htmlelement \| （（）=> htmLelement）\|間違い	document.body	プレビューのためにマウントノードを返します
Imagerender	（OriginalNode：React.ReacteLement、Info：{transform：transformType}）=> React.ReactNode	-	画像をカスタマイズします
ツールバレンダー	（OriginalNode：React.ReacteLement、Info：Omit <ToolBarrenderInfotype、 'current' \| 'total'>）=> race.Reactnode	-	ツールバーをカスタマイズします
onvisiblechange	（目に見える：boolean、prevvisible：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

名前	タイプ	デフォルト	説明
プレビュー	boolean \| previewgrouptype	真実	プレビューを表示するかどうか、現在：表示IMGインデックスをプレビューする場合、デフォルト0
previewprefixcls	弦	RC-Image-Preview	プレビューclassNameプレフィックス
アイコン	{[iconkey]？：ReactNode}	-	トップオペレーションバーのアイコン、Iconkey： 'Rotateleft' \| 「ロタルタイト」\| 'zoomin' \| 「ズームアウト」\| 「クローズ」\| 「左」\| '右'
後退する	弦	-	失敗したsrc
アイテム	（string \| {src：string、alt：string、crossorigin：string、...}）[]	-	プレビューグループ

previewgrouptype

名前	タイプ	デフォルト	説明
見える	ブール	-	プレビューが開いているかどうか
可動式	ブール	真実	ドラッグを有効にします
現在	番号	-	現在のインデックス
Closeicon	React.Reactnode	-	カスタムクローズアイコン
scalestep	番号	0.5	スケールの増加または減少の数
ミンスケール	番号	1	最小スケール
マックススケール	番号	50	最大スケール
forcerender	ブール	-	強制レンダリングプレビュー
GetContainer	文字列\| htmlelement \| （（）=> htmLelement）\|間違い	document.body	プレビューのためにマウントノードを返します
郡	（現在：番号、合計：番号）=> ReactNode	-	カウントをカスタマイズします
Imagerender	（OriginalNode：React.ReacteLement、Info：{transform：transformType、current：number}）=> race.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 ;
}