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 |