@hashicorp/react-image

super optimized image element, pulls from dato and formats for 7 screen sizes in two formats. Skips optimization for SVGs.

Usage no npm install needed!

<script type="module">
  import hashicorpReactImage from 'https://cdn.skypack.dev/@hashicorp/react-image';
</script>

README

Image

⚠️Avoid using this component to render images local to your project. This component expects image source URLs to be from DatoCMS (e.g coming from 'https://www.datocms-assets.com`) as it appends query parameters to control various image attributes like format and sizing. Dato is using Imgix under the hood. ⚠️

Super optimized image element, pulls from dato and formats for 7 screen sizes in two formats. Skips optimization for SVGs.

Props

  • url (str): url of the image docs
  • alt (str): [optional] alt text for the image docs
  • format (str): [optional] format of the image, for example svg, jpg, png, etc.
  • steps (arr): [optional] array of screen sizes to optimize for
  • sizes (str): [optional] same as sizes on an img tag docs
  • aspectRatio (arr): [optional] automatically crops to aspect ratio. 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]).
  • imgixOptions (obj): [optional] params passed directly to imgix, reference here

See the props file for more details.

Dependents:

  • hero
  • logo-grid
  • nav
  • person-list
  • resource-list
  • text-and-image