Image

Use Image to create both normal and responsive image elements.
  • Experimental
  • Not reviewed for accessibility
import {Image} from '@primer/react-brand'

Examples

Default

This component uses the img element by default.

Picture

The as prop can be used to set the container of the image to use picture.

Picture with sources

The sources prop can be used to set the source elements within the picture component. This can only be used when as is set to picture.

Image with source set

The srcSet prop can be used to set the srcSet of the image. This can only be used when as is set to img.

Aspect ratio

The aspectRatio prop can be used to set the aspect ratio of the image. This is useful when the image is not the same aspect ratio as the container.

Height

The height prop can be used to set the height of the image. This can be used along side the aspectRatio prop to create a responsive image the same size as other images.

Width

The width prop can be used to set the width of the image. This can be used along side the aspectRatio prop to create a responsive image the same size as other images.

Component props

Image Required

nametypedefaultrequireddescription
srcstringtrueSpecifies the path to the image
altstringtrueSpecifies a text value explaining the nature of the image for users of assistive technology
asimg, pictureimgfalseSpecification to create a picture component
sources{srcset: string, media: string}[]falseWhen picture is specified in the as prop sources allows you to set the source elements.
aspectRatio'1:1', '16:9', '16:10', '4:3', 'custom'undefinedfalseSets the image aspect ratio. A custom ratio can be provided in the design tokens.
heightnumberfalseThe height of the image element or its container if it has an aspect ratio
widthnumberfalseThe width of the image element or its container if it has an aspect ratio
loadingeager, lazyeagerfalseThe loading attribute specifies whether a browser should load an image immediately or to defer loading of off-screen images until for example the user scrolls near them.
decodingsync, async, autosyncfalseSets the image decoding strategy. Representing a hint given to the browser on how it should decode the image.
classNamestringfalseSets a custom CSS class