Image
Use Image to create both normal and responsive image elements.
import {Image} from '@primer/react-brand'
This component uses the img element by default.
The as prop can be used to set the container of the image to use picture.
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.
The srcSet prop can be used to set the srcSet of the image. This can only be used when as is set to img.
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.
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.
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.
| name | type | default | required | description |
|---|---|---|---|---|
src | string | true | Specifies the path to the image | |
alt | string | true | Specifies a text value explaining the nature of the image for users of assistive technology | |
as | img, picture | img | false | Specification to create a picture component |
sources | {srcset: string, media: string}[] | false | When 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' | undefined | false | Sets the image aspect ratio. A custom ratio can be provided in the design tokens. |
height | number | false | The height of the image element or its container if it has an aspect ratio | |
width | number | false | The width of the image element or its container if it has an aspect ratio | |
loading | eager, lazy | eager | false | The 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. |
decoding | sync, async, auto | sync | false | Sets the image decoding strategy. Representing a hint given to the browser on how it should decode the image. |
className | string | false | Sets a custom CSS class |