<Image> ComponentThe <Image /> component is used widely across HashiCorp properties. At its most basic, it looks like this:
Here are the props that <Image /> accepts:
| Name | Description |
|---|---|
urlstring | The image source, must be from datocms to work with this component |
altstring | The alt description for the image, optional but strongly encouraged |
formatstring | Just the extension of the image. If not provided, will be auto-detected via the URL |
stepsarray | 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. |
sizesstring | https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes - default value provided. |
aspectRatioarray | 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. |
imgixOptionsobject | Additional imgix url parameters to add to the image (reference: https://docs.imgix.com/apis/url) |
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.