/

<Image> Component

The <Image /> component is used widely across HashiCorp properties. At its most basic, it looks like this:

Share
Code Editor
<Image alt='Image example' url='https://www.datocms-assets.com/2885/1592632185-hcp-social-share.jpg' style={{ maxWidth: '100%' }} />

Where it's used

Latest:4.1.1
Search with

Releases

Latest:4.1.1
registry.npmjs.org
0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...
2.x.x
Loading 2.x.x releases...
3.x.x
Loading 3.x.x releases...
4.x.x
Loading 4.x.x releases...

Image Props

Here are the props that <Image /> accepts:

NameDescription
url
string
The image source, must be from datocms to work with this component
alt
string
The alt description for the image, optional but strongly encouraged
format
string
Just the extension of the image. If not provided, will be auto-detected via the URL
steps
array
An array of image widths that the image should be available at - the image closest to the current screen width will be used. Default value provided.
sizes
string
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes - default value provided.
aspectRatio
array
Optional, automatically crops the image to an aspect ratio. The first two items in the array are the ratio (ex. [16,9]), and the third is the base width that images will be cropped to in IE, which doesn't support srcset (ex. [16,9,500]). If string is provided, brackets should be excluded (ex. 16,9,500). String will be converted to array.
imgixOptions
object
Additional imgix url parameters to add to the image (reference: https://docs.imgix.com/apis/url)

Playground

The code editor below shows all available props. You can tinker with it by changing the values. All properties below are set to their default values to start.

Share
Code Editor
<Image

  alt='HashiCorp Logo'

  url='https://www.datocms-assets.com/2885/1508522484-share.jpg'

  format='jpg'

  steps={[250, 500, 750, 1000]}

  sizes='50vw'

  aspectRatio={[16, 9, 500]}

  imgixOptions={{}}

  style={{ maxWidth: '100%' }}

/>