@hashicorp/react-image
v4.1.1
Published
super optimized image element, pulls from dato and formats for 7 screen sizes in two formats. Skips optimization for SVGs.
Downloads
13,323
Maintainers
Keywords
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 docsalt
(str): [optional] alt text for the image docsformat
(str): [optional] format of the image, for examplesvg
,jpg
,png
, etc.steps
(arr): [optional] array of screen sizes to optimize forsizes
(str): [optional] same as sizes on an img tag docsaspectRatio
(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