Question

我一直试图在Gatsby项目的index.js页面上调整图像的大小。我已经通过“ gatsby-image”导入加载了它，并按原样加载了所有代码，但是我无法弄清楚如何在该js文件或为样式设计而来的scss文件中调整大小。

我试图更改maxWidth大小，但是似乎要做的就是更改实际图像质量，而不是大小。我也曾尝试在scss文件中更改它，但这似乎也不起作用。

<Img fluid={props.data.imageOne.childImageSharp.fluid} />

export const fluidImage = graphql`
  fragment fluidImage on File {
   childImageSharp {
    fluid(maxWidth: 1000) {
  ...GatsbyImageSharpFluid
     }
   }
  }
`;

export const pageQuery = graphql`
 query {
  imageOne: file(relativePath: { eq: "me.jpg" }) {
  ...fluidImage
   }
 }
`

我希望图像较小，但是我目前唯一的输出是质量较低的图像，或者图像的一部分被切掉了。

Answer 1

不幸的是，您无法直接通过变量在查询中更改maxWidth: 1000，因为GraphQL在构建时运行一次，然后再运行一次。无法进行热装。

export const fluidImage = graphql`
  fragment fluidImage on File {
   childImageSharp {
    fluid(maxWidth: 1000) {
  ...GatsbyImageSharpFluid
     }
   }
  }
`;

GraphQL以您指定的质量向您提供图像。然后，您可以通过CSS调整图片的大小。我记得跟你有同样的问题。我将图像组件包装在具有已定义的with或min-width / max-width的div中。不是最优雅的解决方案，但它可以工作。

import GatsbyImage from "gatsby-image";
// ...
<ImageWrapper className="imageWrapper">
  <GatsbyImage fluid={fluid} />
</ImageWrapper>

在您的CSS文件中：

.imageWrapper {
   /*   min-width: 11rem; */
   /*   max-width: 20rem; */
   width: 280px;
}

如何在gatsby的index.js页面上从“ gatsby-image”调整流体图像的大小？

1 个答案: