import { Accessibility, AccessibilityAttributes, ImageBehaviorProps } from '@fluentui/accessibility'; import * as React from 'react'; import { UIComponentProps } from '../../utils'; export interface ImageProps extends UIComponentProps, ImageBehaviorProps { /** Alternative text. */ alt?: string; 'aria-label'?: AccessibilityAttributes['aria-label']; /** Accessibility behavior if overridden by the user. */ accessibility?: Accessibility<ImageBehaviorProps>; /** An image may be formatted to appear inline with text as an avatar. */ avatar?: boolean; /** An image can appear circular. */ circular?: boolean; /** An image can take up the width of its container. */ fluid?: boolean; /** Image source URL. */ src?: string; } declare const _default: { <Tag>(x: { as: Tag; } & ImageProps & { [K: string]: any; }): JSX.Element; (x: { alt?: string; 'aria-label'?: string; accessibility?: Accessibility<ImageBehaviorProps>; avatar?: boolean; circular?: boolean; fluid?: boolean; src?: string; className?: string; design?: import("@fluentui/react-bindings").ComponentDesignProp; styles?: import("@fluentui/styles").ComponentSlotStyle<any, any>; variables?: any; ref?: React.LegacyRef<HTMLImageElement>; key?: import("csstype").AnimationIterationCountProperty; crossOrigin?: "" | "anonymous" | "use-credentials"; decoding?: "auto" | "async" | "sync"; height?: import("csstype").AnimationIterationCountProperty; sizes?: string; srcSet?: string; useMap?: string; width?: import("csstype").AnimationIterationCountProperty; defaultChecked?: boolean; defaultValue?: string | string[]; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; accessKey?: string; contentEditable?: boolean; contextMenu?: string; dir?: string; draggable?: boolean; hidden?: boolean; id?: string; lang?: string; placeholder?: string; slot?: string; spellCheck?: boolean; style?: React.CSSProperties; tabIndex?: number; title?: string; inputMode?: string; is?: string; radioGroup?: string; role?: string; about?: string; datatype?: string; inlist?: any; prefix?: string; property?: string; resource?: string; typeof?: string; vocab?: string; autoCapitalize?: string; autoCorrect?: string; autoSave?: string; color?: string; itemProp?: string; itemScope?: boolean; itemType?: string; itemID?: string; itemRef?: string; results?: number; security?: string; unselectable?: "on" | "off"; 'aria-activedescendant'?: string; 'aria-atomic'?: boolean | "false" | "true"; 'aria-autocomplete'?: "both" | "none" | "inline" | "list"; 'aria-busy'?: boolean | "false" | "true"; 'aria-checked'?: boolean | "mixed" | "false" | "true"; 'aria-colcount'?: number; 'aria-colindex'?: number; 'aria-colspan'?: number; 'aria-controls'?: string; 'aria-current'?: boolean | "page" | "false" | "true" | "time" | "step" | "location" | "date"; 'aria-describedby'?: string; 'aria-details'?: string; 'aria-disabled'?: boolean | "false" | "true"; 'aria-dropeffect'?: "none" | "copy" | "move" | "link" | "execute" | "popup"; 'aria-errormessage'?: string; 'aria-expanded'?: boolean | "false" | "true"; 'aria-flowto'?: string; 'aria-grabbed'?: boolean | "false" | "true"; 'aria-haspopup'?: boolean | "listbox" | "grid" | "menu" | "false" | "true" | "dialog" | "tree"; 'aria-hidden'?: boolean | "false" | "true"; 'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling"; 'aria-keyshortcuts'?: string; 'aria-labelledby'?: string; 'aria-level'?: number; 'aria-live'?: "off" | "assertive" | "polite"; 'aria-modal'?: boolean | "false" | "true"; 'aria-multiline'?: boolean | "false" | "true"; 'aria-multiselectable'?: boolean | "false" | "true"; 'aria-orientation'?: "horizontal" | "vertical"; 'aria-owns'?: string; 'aria-placeholder'?: string; 'aria-posinset'?: number; 'aria-pressed'?: boolean | "mixed" | "false" | "true"; 'aria-readonly'?: boolean | "false" | "true"; 'aria-relevant'?: "all" | "text" | "additions" | "additions text" | "removals"; 'aria-required'?: boolean | "false" | "true"; 'aria-roledescription'?: string; 'aria-rowcount'?: number; 'aria-rowindex'?: number; 'aria-rowspan'?: number; 'aria-selected'?: boolean | "false" | "true"; 'aria-setsize'?: number; 'aria-sort'?: "none" | "ascending" | "descending" | "other"; 'aria-valuemax'?: number; 'aria-valuemin'?: number; 'aria-valuenow'?: number; 'aria-valuetext'?: string; children?: React.ReactNode; dangerouslySetInnerHTML?: { __html: string; }; onCopy?: (event: React.ClipboardEvent<HTMLImageElement>) => void; onCopyCapture?: (event: React.ClipboardEvent<HTMLImageElement>) => void; onCut?: (event: React.ClipboardEvent<HTMLImageElement>) => void; onCutCapture?: (event: React.ClipboardEvent<HTMLImageElement>) => void; onPaste?: (event: React.ClipboardEvent<HTMLImageElement>) => void; onPasteCapture?: (event: React.ClipboardEvent<HTMLImageElement>) => void; onCompositionEnd?: (event: React.CompositionEvent<HTMLImageElement>) => void; onCompositionEndCapture?: (event: React.CompositionEvent<HTMLImageElement>) => void; onCompositionStart?: (event: React.CompositionEvent<HTMLImageElement>) => void; onCompositionStartCapture?: (event: React.CompositionEvent<HTMLImageElement>) => void; onCompositionUpdate?: (event: React.CompositionEvent<HTMLImageElement>) => void; onCompositionUpdateCapture?: (event: React.CompositionEvent<HTMLImageElement>) => void; onFocus?: (event: React.FocusEvent<HTMLImageElement>) => void; onFocusCapture?: (event: React.FocusEvent<HTMLImageElement>) => void; onBlur?: (event: React.FocusEvent<HTMLImageElement>) => void; onBlurCapture?: (event: React.FocusEvent<HTMLImageElement>) => void; onChange?: (event: React.FormEvent<HTMLImageElement>) => void; onChangeCapture?: (event: React.FormEvent<HTMLImageElement>) => void; onBeforeInput?: (event: React.FormEvent<HTMLImageElement>) => void; onBeforeInputCapture?: (event: React.FormEvent<HTMLImageElement>) => void; onInput?: (event: React.FormEvent<HTMLImageElement>) => void; onInputCapture?: (event: React.FormEvent<HTMLImageElement>) => void; onReset?: (event: React.FormEvent<HTMLImageElement>) => void; onResetCapture?: (event: React.FormEvent<HTMLImageElement>) => void; onSubmit?: (event: React.FormEvent<HTMLImageElement>) => void; onSubmitCapture?: (event: React.FormEvent<HTMLImageElement>) => void; onInvalid?: (event: React.FormEvent<HTMLImageElement>) => void; onInvalidCapture?: (event: React.FormEvent<HTMLImageElement>) => void; onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onLoadCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onErrorCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onKeyDown?: (event: React.KeyboardEvent<HTMLImageElement>) => void; onKeyDownCapture?: (event: React.KeyboardEvent<HTMLImageElement>) => void; onKeyPress?: (event: React.KeyboardEvent<HTMLImageElement>) => void; onKeyPressCapture?: (event: React.KeyboardEvent<HTMLImageElement>) => void; onKeyUp?: (event: React.KeyboardEvent<HTMLImageElement>) => void; onKeyUpCapture?: (event: React.KeyboardEvent<HTMLImageElement>) => void; onAbort?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onAbortCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onCanPlay?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onCanPlayCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onCanPlayThrough?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onCanPlayThroughCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onDurationChange?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onDurationChangeCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onEmptied?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onEmptiedCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onEncrypted?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onEncryptedCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onEnded?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onEndedCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onLoadedData?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onLoadedDataCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onLoadedMetadata?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onLoadedMetadataCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onLoadStart?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onLoadStartCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onPause?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onPauseCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onPlay?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onPlayCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onPlaying?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onPlayingCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onProgress?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onProgressCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onRateChange?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onRateChangeCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onSeeked?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onSeekedCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onSeeking?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onSeekingCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onStalled?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onStalledCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onSuspend?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onSuspendCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onTimeUpdate?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onTimeUpdateCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onVolumeChange?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onVolumeChangeCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onWaiting?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onWaitingCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onClick?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void; onClickCapture?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void; onContextMenu?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void; onContextMenuCapture?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void; onDoubleClick?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void; onDoubleClickCapture?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void; onDrag?: (event: React.DragEvent<HTMLImageElement>) => void; onDragCapture?: (event: React.DragEvent<HTMLImageElement>) => void; onDragEnd?: (event: React.DragEvent<HTMLImageElement>) => void; onDragEndCapture?: (event: React.DragEvent<HTMLImageElement>) => void; onDragEnter?: (event: React.DragEvent<HTMLImageElement>) => void; onDragEnterCapture?: (event: React.DragEvent<HTMLImageElement>) => void; onDragExit?: (event: React.DragEvent<HTMLImageElement>) => void; onDragExitCapture?: (event: React.DragEvent<HTMLImageElement>) => void; onDragLeave?: (event: React.DragEvent<HTMLImageElement>) => void; onDragLeaveCapture?: (event: React.DragEvent<HTMLImageElement>) => void; onDragOver?: (event: React.DragEvent<HTMLImageElement>) => void; onDragOverCapture?: (event: React.DragEvent<HTMLImageElement>) => void; onDragStart?: (event: React.DragEvent<HTMLImageElement>) => void; onDragStartCapture?: (event: React.DragEvent<HTMLImageElement>) => void; onDrop?: (event: React.DragEvent<HTMLImageElement>) => void; onDropCapture?: (event: React.DragEvent<HTMLImageElement>) => void; onMouseDown?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void; onMouseDownCapture?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void; onMouseEnter?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void; onMouseLeave?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void; onMouseMove?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void; onMouseMoveCapture?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void; onMouseOut?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void; onMouseOutCapture?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void; onMouseOver?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void; onMouseOverCapture?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void; onMouseUp?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void; onMouseUpCapture?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void; onSelect?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onSelectCapture?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void; onTouchCancel?: (event: React.TouchEvent<HTMLImageElement>) => void; onTouchCancelCapture?: (event: React.TouchEvent<HTMLImageElement>) => void; onTouchEnd?: (event: React.TouchEvent<HTMLImageElement>) => void; onTouchEndCapture?: (event: React.TouchEvent<HTMLImageElement>) => void; onTouchMove?: (event: React.TouchEvent<HTMLImageElement>) => void; onTouchMoveCapture?: (event: React.TouchEvent<HTMLImageElement>) => void; onTouchStart?: (event: React.TouchEvent<HTMLImageElement>) => void; onTouchStartCapture?: (event: React.TouchEvent<HTMLImageElement>) => void; onPointerDown?: (event: React.PointerEvent<HTMLImageElement>) => void; onPointerDownCapture?: (event: React.PointerEvent<HTMLImageElement>) => void; onPointerMove?: (event: React.PointerEvent<HTMLImageElement>) => void; onPointerMoveCapture?: (event: React.PointerEvent<HTMLImageElement>) => void; onPointerUp?: (event: React.PointerEvent<HTMLImageElement>) => void; onPointerUpCapture?: (event: React.PointerEvent<HTMLImageElement>) => void; onPointerCancel?: (event: React.PointerEvent<HTMLImageElement>) => void; onPointerCancelCapture?: (event: React.PointerEvent<HTMLImageElement>) => void; onPointerEnter?: (event: React.PointerEvent<HTMLImageElement>) => void; onPointerEnterCapture?: (event: React.PointerEvent<HTMLImageElement>) => void; onPointerLeave?: (event: React.PointerEvent<HTMLImageElement>) => void; onPointerLeaveCapture?: (event: React.PointerEvent<HTMLImageElement>) => void; onPointerOver?: (event: React.PointerEvent<HTMLImageElement>) => void; onPointerOverCapture?: (event: React.PointerEvent<HTMLImageElement>) => void; onPointerOut?: (event: React.PointerEvent<HTMLImageElement>) => void; onPointerOutCapture?: (event: React.PointerEvent<HTMLImageElement>) => void; onGotPointerCapture?: (event: React.PointerEvent<HTMLImageElement>) => void; onGotPointerCaptureCapture?: (event: React.PointerEvent<HTMLImageElement>) => void; onLostPointerCapture?: (event: React.PointerEvent<HTMLImageElement>) => void; onLostPointerCaptureCapture?: (event: React.PointerEvent<HTMLImageElement>) => void; onScroll?: (event: React.UIEvent<HTMLImageElement>) => void; onScrollCapture?: (event: React.UIEvent<HTMLImageElement>) => void; onWheel?: (event: React.WheelEvent<HTMLImageElement>) => void; onWheelCapture?: (event: React.WheelEvent<HTMLImageElement>) => void; onAnimationStart?: (event: React.AnimationEvent<HTMLImageElement>) => void; onAnimationStartCapture?: (event: React.AnimationEvent<HTMLImageElement>) => void; onAnimationEnd?: (event: React.AnimationEvent<HTMLImageElement>) => void; onAnimationEndCapture?: (event: React.AnimationEvent<HTMLImageElement>) => void; onAnimationIteration?: (event: React.AnimationEvent<HTMLImageElement>) => void; onAnimationIterationCapture?: (event: React.AnimationEvent<HTMLImageElement>) => void; onTransitionEnd?: (event: React.TransitionEvent<HTMLImageElement>) => void; onTransitionEndCapture?: (event: React.TransitionEvent<HTMLImageElement>) => void; }): JSX.Element; } & { displayName: string; className: string; handledProps: ("aria-label" | "className" | "src" | "variables" | "styles" | "alt" | "accessibility" | "design" | "circular" | "fluid" | "avatar")[]; create: import("../../utils").ShorthandFactory<ImageProps>; }; /** * An Image is a graphic representation of something. * * @accessibility * If image should be visible to screen readers, textual representation needs to be provided in 'alt' property. * * Other considerations: * - when alt property is empty, then Narrator in scan mode navigates to image and narrates it as empty paragraph. * - when image has role='presentation' then screen readers navigate to the element in scan/virtual mode. To avoid this, the attribute "aria-hidden='true'" is applied by the default image behavior. * - when alt property is used in combination with aria-label, arialabbeledby or title, additional screen readers verification is needed as each screen reader handles this combination differently. */ export default _default;