Question

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

与其添加类似于我的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，盖茨比流体正在变形并且未显示其完整图像显示。原始图像也获得了以下CSS：

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

正如您所看到的，我将图像设置在绝对位置，但是gatsby图像显示了规则的块元素。

反正有解决此问题的方法吗？如果不是，是否可以简单地从trapi api添加图像，而不使用gatsby的常规图像组件？

更新：这是查询：

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

Answer 1

听起来像您使用固定图像会更好吗？

更新您还可以使用以下道具为gatsby-image设置样式：

style：扩展为包装器元素的默认样式
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>

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

1 个答案: