Gatsby 在我的图像上添加 gatsby-image-wrapper

Question

我在我的项目中使用 gatsby，通过 Image 组件使用strapi.js。我正在尝试使用流体版本，但是我遇到了一些问题。

不是像我的 HTML 和 CSS 设计那样简单的图像，而是添加了这个奇怪的 gatsby-image-wrapper 包装器 div，它破坏了我的图像定位。

例如，我只在我的 gatsby 项目中使用此代码：

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

然后在 gatsby 上它给了我这个：

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>

图像的常规尺寸为 211 x 217，gatsby 流体正在扭曲并且不显示其完整的图像显示。原图也有这个 CSS：

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

如您所见，我将图像设置在绝对位置，但 gatsby 图像显示的是常规块元素。

有没有办法解决这个问题？如果没有，是否可以在不使用 gatsby 的常规 Image 组件的情况下简单地从strapi api添加图像？

更新：这是查询：

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

Answer 1

听起来你最好使用固定图像？

更新 您还可以使用以下道具来覆盖 gatsby-image 的样式：

• 样式：扩展到包装元素的默认样式
• imgStyle：散布到图片元素的默认样式中
• placeholderStyle：传播到占位符图片元素的默认样式

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

请参阅下面的更新查询：

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>