Docs

Back to component list

Image

Renders an image from an internal or external source.

NameDefault
id
string

Id of the internal image

src
string

URI of the external image

alt
string

Set the width of the image.

https://developer.mozilla.org/en-US/docs/Web/CSS/width

width
string'100%'

Set the width of the image.

https://developer.mozilla.org/en-US/docs/Web/CSS/width

height
string

Set the height of the image.

https://developer.mozilla.org/en-US/docs/Web/CSS/height

fit
stringnull

Set how the image should be fit into the container.

Possible options:

  • fill
  • contain
  • cover
  • none
  • scale-down

Live demo and more details: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

position
string'center center'

Set how the image should be positioned within its container.

Takes two values, one for the horizontal and one for the vertical axis.

Example values:

  • center bottom
  • 2rem center
  • top right

Live demo and more details: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position

contextKey
string'images'

Defines which image variant / context is used to locate the image data.

previewDataURI
object

Overwrite the embedded image preview with your own value.

Will overwrite the value in fluid.base64

For example via https://www.gatsbyjs.org/packages/gatsby-transformer-sqip/

file
object

Used to render this component without context data.

fluid
object

Data to render the image via Gatsby Image as fluid/responsive image. Usually generated via a gatsby-transformer-sharp fragment.

Requires file property to be set.

See:



Back to component list