Image

The Image component is a simple wrapper of the native HTML image tag with a max-width set to 100%.

For more information on how to use the features and props for this component, check out the developer documentation.

The Image component requires an alt property to describe the image passed to src for accessibility purposes.

NameTypeDefaultDescription
alt*stringThe HTML alt attribute for the image.
about
string |undefined 
accessKey
string |undefined 
aria-activedescendant
string |undefined 
Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-atomic
boolean |'false' |'true' |undefined 
Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
aria-autocomplete
'none' |'inline' |'list' |'both' |undefined 
Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
aria-busy
boolean |'false' |'true' |undefined 
Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
aria-checked
boolean |'false' |'mixed' |'true' |undefined 
Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
aria-colcount
number |undefined 
Defines the total number of columns in a table, grid, or treegrid.
aria-colindex
number |undefined 
Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
aria-colspan
number |undefined 
Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
aria-controls
string |undefined 
Identifies the element (or elements) whose contents or presence are controlled by the current element.
aria-current
boolean |'false' |'true' |'page' |'step' |'location' |'date' |'time' |undefined 
Indicates the element that represents the current item within a container or set of related elements.
aria-describedby
string |undefined 
Identifies the element (or elements) that describes the object.
aria-details
string |undefined 
Identifies the element that provides a detailed, extended description for the object.
aria-disabled
boolean |'false' |'true' |undefined 
Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
aria-errormessage
string |undefined 
Identifies the element that provides an error message for the object.
aria-expanded
boolean |'false' |'true' |undefined 
Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
aria-flowto
string |undefined 
Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
aria-haspopup
boolean |'false' |'true' |'menu' |'listbox' |'tree' |'grid' |'dialog' |undefined 
Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
aria-hidden
boolean |'false' |'true' |undefined 
Indicates whether the element is exposed to an accessibility API.
aria-invalid
boolean |'false' |'true' |'grammar' |'spelling' |undefined 
Indicates the entered value does not conform to the format expected by the application.
aria-keyshortcuts
string |undefined 
Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
aria-label
string |undefined 
Defines a string value that labels the current element.
aria-labelledby
string |undefined 
Identifies the element (or elements) that labels the current element.
aria-level
number |undefined 
Defines the hierarchical level of an element within a structure.
aria-live
'off' |'assertive' |'polite' |undefined 
Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
aria-modal
boolean |'false' |'true' |undefined 
Indicates whether an element is modal when displayed.
aria-multiline
boolean |'false' |'true' |undefined 
Indicates whether a text box accepts multiple lines of input or only a single line.
aria-multiselectable
boolean |'false' |'true' |undefined 
Indicates that the user may select more than one item from the current selectable descendants.
aria-orientation
'horizontal' |'vertical' |undefined 
Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
aria-owns
string |undefined 
Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
aria-placeholder
string |undefined 
Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
aria-posinset
number |undefined 
Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
aria-pressed
boolean |'false' |'mixed' |'true' |undefined 
Indicates the current "pressed" state of toggle buttons.
aria-readonly
boolean |'false' |'true' |undefined 
Indicates that the element is not editable, but is otherwise operable.
aria-relevant
'additions' |'additions removals' |'additions text' |'all' |'removals' |'removals additions' |'removals text' |'text' |'text additions' |'text removals' |undefined 
Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
aria-required
boolean |'false' |'true' |undefined 
Indicates that user input is required on the element before a form may be submitted.
aria-roledescription
string |undefined 
Defines a human-readable, author-localized description for the role of an element.
aria-rowcount
number |undefined 
Defines the total number of rows in a table, grid, or treegrid.
aria-rowindex
number |undefined 
Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
aria-rowspan
number |undefined 
Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
aria-selected
boolean |'false' |'true' |undefined 
Indicates the current "selected" state of various widgets.
aria-setsize
number |undefined 
Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
aria-sort
'none' |'ascending' |'descending' |'other' |undefined 
Indicates if items in a table or grid are sorted in ascending or descending order.
aria-valuemax
number |undefined 
Defines the maximum allowed value for a range widget.
aria-valuemin
number |undefined 
Defines the minimum allowed value for a range widget.
aria-valuenow
number |undefined 
Defines the current value for a range widget.
aria-valuetext
string |undefined 
Defines the human readable text alternative of aria-valuenow for a range widget.
autoCapitalize
string |undefined 
autoCorrect
string |undefined 
autoSave
string |undefined 
children
ReactNode |undefined 
className
string |undefined 
color
string |undefined 
contentEditable
Booleanish |'inherit' |undefined 
contextMenu
string |undefined 
crossOrigin
'anonymous' |'use-credentials' |'' |undefined 
cssInterpolationWithTheme<any>
dangerouslySetInnerHTML
{
  __html: string;
} | undefined
datatype
string |undefined 
decoding
'async' |'auto' |'sync' |undefined 
defaultChecked
boolean |undefined 
defaultValue
string |number |ReadonlyArray<string> |undefined 
dir
string |undefined 
draggable
Booleanish |undefined 
height
number |string |undefined 
hidden
boolean |undefined 
id
string |undefined 
inlistany
inputMode
'none' |'text' |'tel' |'url' |'email' |'numeric' |'decimal' |'search' |undefined 
Hints at the type of data that might be entered by the user while editing the element or its contents
is
string |undefined 
Specify that a standard HTML element should behave like a defined custom built-in element
itemID
string |undefined 
itemProp
string |undefined 
itemRef
string |undefined 
itemScope
boolean |undefined 
itemType
string |undefined 
lang
string |undefined 
loading
'eager' |'lazy' |undefined 
onAbort
ReactEventHandler<HTMLImageElement> |undefined 
onAbortCapture
ReactEventHandler<HTMLImageElement> |undefined 
onAnimationEnd
AnimationEventHandler<HTMLImageElement> |undefined 
onAnimationEndCapture
AnimationEventHandler<HTMLImageElement> |undefined 
onAnimationIteration
AnimationEventHandler<HTMLImageElement> |undefined 
onAnimationIterationCapture
AnimationEventHandler<HTMLImageElement> |undefined 
onAnimationStart
AnimationEventHandler<HTMLImageElement> |undefined 
onAnimationStartCapture
AnimationEventHandler<HTMLImageElement> |undefined 
onAuxClick
MouseEventHandler<HTMLImageElement> |undefined 
onAuxClickCapture
MouseEventHandler<HTMLImageElement> |undefined 
onBeforeInput
FormEventHandler<HTMLImageElement> |undefined 
onBeforeInputCapture
FormEventHandler<HTMLImageElement> |undefined 
onBlur
FocusEventHandler<HTMLImageElement> |undefined 
onBlurCapture
FocusEventHandler<HTMLImageElement> |undefined 
onCanPlay
ReactEventHandler<HTMLImageElement> |undefined 
onCanPlayCapture
ReactEventHandler<HTMLImageElement> |undefined 
onCanPlayThrough
ReactEventHandler<HTMLImageElement> |undefined 
onCanPlayThroughCapture
ReactEventHandler<HTMLImageElement> |undefined 
onChange
FormEventHandler<HTMLImageElement> |undefined 
onChangeCapture
FormEventHandler<HTMLImageElement> |undefined 
onClick
MouseEventHandler<HTMLImageElement> |undefined 
onClickCapture
MouseEventHandler<HTMLImageElement> |undefined 
onCompositionEnd
CompositionEventHandler<HTMLImageElement> |undefined 
onCompositionEndCapture
CompositionEventHandler<HTMLImageElement> |undefined 
onCompositionStart
CompositionEventHandler<HTMLImageElement> |undefined 
onCompositionStartCapture
CompositionEventHandler<HTMLImageElement> |undefined 
onCompositionUpdate
CompositionEventHandler<HTMLImageElement> |undefined 
onCompositionUpdateCapture
CompositionEventHandler<HTMLImageElement> |undefined 
onContextMenu
MouseEventHandler<HTMLImageElement> |undefined 
onContextMenuCapture
MouseEventHandler<HTMLImageElement> |undefined 
onCopy
ClipboardEventHandler<HTMLImageElement> |undefined 
onCopyCapture
ClipboardEventHandler<HTMLImageElement> |undefined 
onCut
ClipboardEventHandler<HTMLImageElement> |undefined 
onCutCapture
ClipboardEventHandler<HTMLImageElement> |undefined 
onDoubleClick
MouseEventHandler<HTMLImageElement> |undefined 
onDoubleClickCapture
MouseEventHandler<HTMLImageElement> |undefined 
onDrag
DragEventHandler<HTMLImageElement> |undefined 
onDragCapture
DragEventHandler<HTMLImageElement> |undefined 
onDragEnd
DragEventHandler<HTMLImageElement> |undefined 
onDragEndCapture
DragEventHandler<HTMLImageElement> |undefined 
onDragEnter
DragEventHandler<HTMLImageElement> |undefined 
onDragEnterCapture
DragEventHandler<HTMLImageElement> |undefined 
onDragExit
DragEventHandler<HTMLImageElement> |undefined 
onDragExitCapture
DragEventHandler<HTMLImageElement> |undefined 
onDragLeave
DragEventHandler<HTMLImageElement> |undefined 
onDragLeaveCapture
DragEventHandler<HTMLImageElement> |undefined 
onDragOver
DragEventHandler<HTMLImageElement> |undefined 
onDragOverCapture
DragEventHandler<HTMLImageElement> |undefined 
onDragStart
DragEventHandler<HTMLImageElement> |undefined 
onDragStartCapture
DragEventHandler<HTMLImageElement> |undefined 
onDrop
DragEventHandler<HTMLImageElement> |undefined 
onDropCapture
DragEventHandler<HTMLImageElement> |undefined 
onDurationChange
ReactEventHandler<HTMLImageElement> |undefined 
onDurationChangeCapture
ReactEventHandler<HTMLImageElement> |undefined 
onEmptied
ReactEventHandler<HTMLImageElement> |undefined 
onEmptiedCapture
ReactEventHandler<HTMLImageElement> |undefined 
onEncrypted
ReactEventHandler<HTMLImageElement> |undefined 
onEncryptedCapture
ReactEventHandler<HTMLImageElement> |undefined 
onEnded
ReactEventHandler<HTMLImageElement> |undefined 
onEndedCapture
ReactEventHandler<HTMLImageElement> |undefined 
onError
ReactEventHandler<HTMLImageElement> |undefined 
onErrorCapture
ReactEventHandler<HTMLImageElement> |undefined 
onFocus
FocusEventHandler<HTMLImageElement> |undefined 
onFocusCapture
FocusEventHandler<HTMLImageElement> |undefined 
onGotPointerCapture
PointerEventHandler<HTMLImageElement> |undefined 
onGotPointerCaptureCapture
PointerEventHandler<HTMLImageElement> |undefined 
onInput
FormEventHandler<HTMLImageElement> |undefined 
onInputCapture
FormEventHandler<HTMLImageElement> |undefined 
onInvalid
FormEventHandler<HTMLImageElement> |undefined 
onInvalidCapture
FormEventHandler<HTMLImageElement> |undefined 
onKeyDown
KeyboardEventHandler<HTMLImageElement> |undefined 
onKeyDownCapture
KeyboardEventHandler<HTMLImageElement> |undefined 
onKeyPress
KeyboardEventHandler<HTMLImageElement> |undefined 
onKeyPressCapture
KeyboardEventHandler<HTMLImageElement> |undefined 
onKeyUp
KeyboardEventHandler<HTMLImageElement> |undefined 
onKeyUpCapture
KeyboardEventHandler<HTMLImageElement> |undefined 
onLoad
ReactEventHandler<HTMLImageElement> |undefined 
onLoadCapture
ReactEventHandler<HTMLImageElement> |undefined 
onLoadStart
ReactEventHandler<HTMLImageElement> |undefined 
onLoadStartCapture
ReactEventHandler<HTMLImageElement> |undefined 
onLoadedData
ReactEventHandler<HTMLImageElement> |undefined 
onLoadedDataCapture
ReactEventHandler<HTMLImageElement> |undefined 
onLoadedMetadata
ReactEventHandler<HTMLImageElement> |undefined 
onLoadedMetadataCapture
ReactEventHandler<HTMLImageElement> |undefined 
onLostPointerCapture
PointerEventHandler<HTMLImageElement> |undefined 
onLostPointerCaptureCapture
PointerEventHandler<HTMLImageElement> |undefined 
onMouseDown
MouseEventHandler<HTMLImageElement> |undefined 
onMouseDownCapture
MouseEventHandler<HTMLImageElement> |undefined 
onMouseEnter
MouseEventHandler<HTMLImageElement> |undefined 
onMouseLeave
MouseEventHandler<HTMLImageElement> |undefined 
onMouseMove
MouseEventHandler<HTMLImageElement> |undefined 
onMouseMoveCapture
MouseEventHandler<HTMLImageElement> |undefined 
onMouseOut
MouseEventHandler<HTMLImageElement> |undefined 
onMouseOutCapture
MouseEventHandler<HTMLImageElement> |undefined 
onMouseOver
MouseEventHandler<HTMLImageElement> |undefined 
onMouseOverCapture
MouseEventHandler<HTMLImageElement> |undefined 
onMouseUp
MouseEventHandler<HTMLImageElement> |undefined 
onMouseUpCapture
MouseEventHandler<HTMLImageElement> |undefined 
onPaste
ClipboardEventHandler<HTMLImageElement> |undefined 
onPasteCapture
ClipboardEventHandler<HTMLImageElement> |undefined 
onPause
ReactEventHandler<HTMLImageElement> |undefined 
onPauseCapture
ReactEventHandler<HTMLImageElement> |undefined 
onPlay
ReactEventHandler<HTMLImageElement> |undefined 
onPlayCapture
ReactEventHandler<HTMLImageElement> |undefined 
onPlaying
ReactEventHandler<HTMLImageElement> |undefined 
onPlayingCapture
ReactEventHandler<HTMLImageElement> |undefined 
onPointerCancel
PointerEventHandler<HTMLImageElement> |undefined 
onPointerCancelCapture
PointerEventHandler<HTMLImageElement> |undefined 
onPointerDown
PointerEventHandler<HTMLImageElement> |undefined 
onPointerDownCapture
PointerEventHandler<HTMLImageElement> |undefined 
onPointerEnter
PointerEventHandler<HTMLImageElement> |undefined 
onPointerEnterCapture
PointerEventHandler<HTMLImageElement> |undefined 
onPointerLeave
PointerEventHandler<HTMLImageElement> |undefined 
onPointerLeaveCapture
PointerEventHandler<HTMLImageElement> |undefined 
onPointerMove
PointerEventHandler<HTMLImageElement> |undefined 
onPointerMoveCapture
PointerEventHandler<HTMLImageElement> |undefined 
onPointerOut
PointerEventHandler<HTMLImageElement> |undefined 
onPointerOutCapture
PointerEventHandler<HTMLImageElement> |undefined 
onPointerOver
PointerEventHandler<HTMLImageElement> |undefined 
onPointerOverCapture
PointerEventHandler<HTMLImageElement> |undefined 
onPointerUp
PointerEventHandler<HTMLImageElement> |undefined 
onPointerUpCapture
PointerEventHandler<HTMLImageElement> |undefined 
onProgress
ReactEventHandler<HTMLImageElement> |undefined 
onProgressCapture
ReactEventHandler<HTMLImageElement> |undefined 
onRateChange
ReactEventHandler<HTMLImageElement> |undefined 
onRateChangeCapture
ReactEventHandler<HTMLImageElement> |undefined 
onReset
FormEventHandler<HTMLImageElement> |undefined 
onResetCapture
FormEventHandler<HTMLImageElement> |undefined 
onScroll
UIEventHandler<HTMLImageElement> |undefined 
onScrollCapture
UIEventHandler<HTMLImageElement> |undefined 
onSeeked
ReactEventHandler<HTMLImageElement> |undefined 
onSeekedCapture
ReactEventHandler<HTMLImageElement> |undefined 
onSeeking
ReactEventHandler<HTMLImageElement> |undefined 
onSeekingCapture
ReactEventHandler<HTMLImageElement> |undefined 
onSelect
ReactEventHandler<HTMLImageElement> |undefined 
onSelectCapture
ReactEventHandler<HTMLImageElement> |undefined 
onStalled
ReactEventHandler<HTMLImageElement> |undefined 
onStalledCapture
ReactEventHandler<HTMLImageElement> |undefined 
onSubmit
FormEventHandler<HTMLImageElement> |undefined 
onSubmitCapture
FormEventHandler<HTMLImageElement> |undefined 
onSuspend
ReactEventHandler<HTMLImageElement> |undefined 
onSuspendCapture
ReactEventHandler<HTMLImageElement> |undefined 
onTimeUpdate
ReactEventHandler<HTMLImageElement> |undefined 
onTimeUpdateCapture
ReactEventHandler<HTMLImageElement> |undefined 
onTouchCancel
TouchEventHandler<HTMLImageElement> |undefined 
onTouchCancelCapture
TouchEventHandler<HTMLImageElement> |undefined 
onTouchEnd
TouchEventHandler<HTMLImageElement> |undefined 
onTouchEndCapture
TouchEventHandler<HTMLImageElement> |undefined 
onTouchMove
TouchEventHandler<HTMLImageElement> |undefined 
onTouchMoveCapture
TouchEventHandler<HTMLImageElement> |undefined 
onTouchStart
TouchEventHandler<HTMLImageElement> |undefined 
onTouchStartCapture
TouchEventHandler<HTMLImageElement> |undefined 
onTransitionEnd
TransitionEventHandler<HTMLImageElement> |undefined 
onTransitionEndCapture
TransitionEventHandler<HTMLImageElement> |undefined 
onVolumeChange
ReactEventHandler<HTMLImageElement> |undefined 
onVolumeChangeCapture
ReactEventHandler<HTMLImageElement> |undefined 
onWaiting
ReactEventHandler<HTMLImageElement> |undefined 
onWaitingCapture
ReactEventHandler<HTMLImageElement> |undefined 
onWheel
WheelEventHandler<HTMLImageElement> |undefined 
onWheelCapture
WheelEventHandler<HTMLImageElement> |undefined 
placeholder
string |undefined 
prefix
string |undefined 
property
string |undefined 
radioGroup
string |undefined 
refRef<HTMLImageElement>Ref for the wrapping element.
referrerPolicy
HTMLAttributeReferrerPolicy |undefined 
resource
string |undefined 
results
number |undefined 
role
AriaRole |undefined 
security
string |undefined 
sizes
string |undefined 
slot
string |undefined 
spellCheck
Booleanish |undefined 
src
string |undefined 
srcSet
string |undefined 
style
CSSProperties |undefined 
suppressContentEditableWarning
boolean |undefined 
suppressHydrationWarning
boolean |undefined 
tabIndex
number |undefined 
title
string |undefined 
translate
'yes' |'no' |undefined 
typeof
string |undefined 
unselectable
'on' |'off' |undefined 
useMap
string |undefined 
vocab
string |undefined 
width
number |string |undefined