# datocms-image

## todo

- extract and [refactor the original](https://github1s.com/datocms/react-datocms/blob/HEAD/src/Image/index.tsx), to support:
  - `fit` (`cover|contain`) options, where `img` renders without surrounding `div` or placeholder `svg`, and will fit to its parent
  - all the same attributes rendered on `img` element, as Next.js does with its component
  -

## notes

- use with `import { Image } from "react-datocms";`
- works with the `responsiveImage` resolver, which is only on DatoCMS direct graphQL API
- [props can be see here](https://github.com/datocms/react-datocms#props)
- [shape of ResponsiveImageObject is here](https://github.com/datocms/react-datocms#the-responsiveimage-object)

  DatoCMS (`react-datocms`) `<Image/>` https://github.com/datocms/react-datocms#progressiveresponsive-image

    className [null]
    style [null]
    pictureClassName [null]
    pictureStyle [null]
    fadeInDuration [500]
    intersectionThreshold [0]
    intersectionMargin ['0 0 0 0']
    lazyLoad [true]
    explicitWidth [false]
    data
      aspectRatio | float
      width | integer
      height | integer
      sizes
      srcSet
      src
      -
      alt
      title
      bgColor
      base64