Gatsby: problem rendering contentful rich text image in gatsby-image

[jmdmacapagal]

I have problem querying the image for gatsby image, am I missing something?

this is the query

... on ContentfulRichText {
              id
              type
              richTextBody {
                json
              }
            }

and this is where I'am rendering it.

import React from 'react'
import PropTypes from 'prop-types'
import './richText.scss'
import Button from '../button'
import { BLOCKS } from '@
'
import { documentToReactComponents } from '@contentful/rich-text-react-renderer'

var typeValue = ''
const options = {
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, children) => {
      return <p className="rich-text__paragraph">{children}</p>
    },

    [BLOCKS.EMBEDDED_ASSET]: node => {
      const { description, file } = node.data.target.fields
      const contentTypes = file['en-US'].contentType
      const contentGroups = contentTypes.split('/')[0]

      switch (contentGroups) {
      case 'image':
        return (
          <div className="rich-text__image-container">
            <img
              className="rich-text__image"
              alt={description && description['en-US']}
              src={file['en-US'].url}
            />
             // I'am trying to use gatsby-image here something like this
               <Image fluid={query} />
          </div>
        )
      }
    },

    [BLOCKS.EMBEDDED_ENTRY]: node => {
      const { fields, sys } = node.data.target
      const { id } = sys.contentType.sys
      const { style = {}, tag = {}, url = {}, caption = {} } = fields

      switch (id) {
      case 'button':
        return (
          <div className={typeValue ? `rich-text__button-${typeValue}` : 'rich-text__button-default'}>
            <Button {...{ style: style['en-US'], caption: caption['en-US'], tag: tag['en-US'], url: url['en-US'] }} />
          </div>
        )
      }
    }
  }
}
const RichText = ({ richTextBody, type }) => {
  typeValue = type
  const flexType = typeof type === undefined || type === null ? '' : `rich-text__${type}`
  return (
    <div className="rich-text">
      <div className={flexType}>{documentToReactComponents(richTextBody.json, options)}</div>
    </div>
  )
}

RichText.propTypes = {
  richTextBody: PropTypes.object.isRequired,
  type: PropTypes.oneOf(['rowly'])
}

export default RichText

I have these packages installed
gatsby-source-contentful
contentful/rich-text-types
contentful/rich-text-react-renderer

edit:
I have already looked for similar problems but the threads are closed without proper closures :/

[LekoArts]

Thank you for opening this!

Please see the issue https://github.com/gatsbyjs/gatsby/issues/14338 and the two I linked there. It's not possible at the moment.

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

[leonardolouie]

@LekoArts thanks hopefully to have this feature soon!