Gatsby adding gatsby-image-wrapper on my image

Question

I am using gatsby on my project using strapi.js via Image component. I am trying to use the fluid version however I have some problems.

Instead of straightforward image similar to my HTML and CSS design its adding this weird gatsby-image-wrapper wrapper div that's destroying my image positioning.

For instance, I only use this code on my gatsby project:

           <div className="rover_img">
                         <Image fluid={photo.childImageSharp.fluid} alt={name}  />
                      </div>

Then on gatsby its giving me this:

div class="gatsby-image-wrapper" style="position: relative; overflow: hidden;"><div aria-hidden="true" style="width: 100%; padding-bottom: 102.5%;"></div><img aria-hidden="true" src="data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAVABQDASIAAhEBAxEB/8QAGQABAQADAQAAAAAAAAAAAAAAAAQBAgMF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgP/2gAMAwEAAhADEAAAAeNcFgruycfArC5Aj//EABsQAAICAwEAAAAAAAAAAAAAAAECABIDESEi/9oACAEBAAEFAt9AFZbTBuwMQczeLNP/xAAZEQABBQAAAAAAAAAAAAAAAAAQAQIREjH/2gAIAQMBAT8BbFQmD//EABYRAAMAAAAAAAAAAAAAAAAAAAEgMf/aAAgBAgEBPwE1P//EABwQAAEDBQAAAAAAAAAAAAAAAAABEUECECAhMf/aAAgBAQAGPwJsHizlKJOzqn//xAAdEAADAQABBQAAAAAAAAAAAAAAAREhMUFRYXGB/9oACAEBAAE/IdIh7ohC+5aMwU6xvyY5FoJXCvp//9oADAMBAAIAAwAAABCw58H/xAAWEQEBAQAAAAAAAAAAAAAAAAABEBH/2gAIAQMBAT8QEE6J/8QAFxEBAQEBAAAAAAAAAAAAAAAAARARIf/aAAgBAgEBPxDUJ0n/xAAcEAEAAwACAwAAAAAAAAAAAAABABEhMVEQQXH/2gAIAQEAAT8Q0Cr1iMUDxoS6bM9SqUYcYwxBdque0qAl5LfkBo7oc//Z" alt="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transition-delay: 500ms;"><picture><source srcset="/static/0e4db65f174c142be93054838f4caef6/f836f/ad29e08f346207837f08c28f4bf82caf.jpg 200w,
    /static/0e4db65f174c142be93054838f4caef6/bfafa/ad29e08f346207837f08c28f4bf82caf.jpg 211w" sizes="(max-width: 211px) 100vw, 211px"><img sizes="(max-width: 211px) 100vw, 211px" srcset="/static/0e4db65f174c142be93054838f4caef6/f836f/ad29e08f346207837f08c28f4bf82caf.jpg 200w,
    /static/0e4db65f174c142be93054838f4caef6/bfafa/ad29e08f346207837f08c28f4bf82caf.jpg 211w" src="/static/0e4db65f174c142be93054838f4caef6/bfafa/ad29e08f346207837f08c28f4bf82caf.jpg" alt="Chris Benson" loading="lazy" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: opacity 500ms ease 0s;"></picture><noscript><picture><source srcset="/static/0e4db65f174c142be93054838f4caef6/f836f/ad29e08f346207837f08c28f4bf82caf.jpg 200w,
    /static/0e4db65f174c142be93054838f4caef6/bfafa/ad29e08f346207837f08c28f4bf82caf.jpg 211w" sizes="(max-width: 211px) 100vw, 211px" /><img loading="lazy" sizes="(max-width: 211px) 100vw, 211px" srcset="/static/0e4db65f174c142be93054838f4caef6/f836f/ad29e08f346207837f08c28f4bf82caf.jpg 200w,
    /static/0e4db65f174c142be93054838f4caef6/bfafa/ad29e08f346207837f08c28f4bf82caf.jpg 211w" src="/static/0e4db65f174c142be93054838f4caef6/bfafa/ad29e08f346207837f08c28f4bf82caf.jpg" alt="Chris Benson" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/></picture></noscript></div>

The regular size of the image is 211 x 217 which gatsby fluid is distorting and not showing its full image display. The original image also got this CSS:

 width: inherit;
    position: absolute;
    -webkit-transform: translateY(-120px) translateX(-120px);
    -ms-transform: translateY(-120px) translateX(-120px);
    transform: translateY(-120px) translateX(-120px);

Which as you can see I am setting my image in a position absolute but the gatsby image is displaying a regular block element.

Is there anyway to fix this? If not is there anyway to simply add an image from strapi api without using the regular Image component of gatsby?

UPDATE: Here's the query:

const query = graphql`
  {
    allStrapiRovers {
      nodes {
        id
        title
        description
        photo {
          childImageSharp {
            fluid{
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`

Answer 1

Sounds like you would be better off using fixed images?

UPDATE You can also over styles for gatsby-image with the following props:

• style: spread into default styles of the wrapper element
• imgStyle: spread into default styles of the image element
• placeholderStyle: spread into the default style of the placeholder image element

<Image imgStyle={{ position: "relative" }} style={{ height "211px", width: "211px" }} />

See updated query below:

const query = graphql`
  {
    allStrapiRovers {
      nodes {
        id
        title
        description
        photo {
          childImageSharp {
            fixed(width: 211){
              ...GatsbyImageSharpFixed
            }
          }
        }
      }
    }
  }
`

...

<div className="rover_img">
  <Image fixed={photo.childImageSharp.fixed} alt={name}  />
</div>