2

我有一个需要在内部服务器上运行的站点。我无权访问该站点，我只是要进行 gatsby 构建并将公用文件夹提供给他们。但是我所有的图像都是一团糟。这是正确的方法吗？为什么我的图像模糊

4

2 回答 2

5

如果您获得的图像具有明显的压缩伪影，首先要尝试的是增加GraphQL 查询quality中的属性（下面的示例）。gatsby-image它默认为 50，因此我建议将其增加到 90 之类的开始，如果这可以解决您的问题，如果您发现图像文件大小增加太多，您可以尝试使用较低的值。当 GitHub 问题中出现提高图像质量的问题时，Gatsby 团队通常会提出相同的建议。您还可以使用该maxWidth参数，特别是如果您希望在较大的视口上渲染全尺寸图像，例如：

const images = useStaticQuery(graphql`
  query {
      allImageSharp {
        fluid(maxWidth: 2048, quality: 90) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`)

如果没有可重复的示例来检查，很难说更多:)gatsby-image 文档非常详尽 - 我建议检查这些文档以了解运行时图像发生的情况gatsby build，以及您可以调整哪些选项。

希望这可以帮助！

于 2019-12-13T07:57:35.780 回答
1

如果您发现您的图像质量对于 gatsby-image 中的大图像不够好，则在 graphql 查询中应用 maxWidth（对于宽度大于高度的图像）/ maxHeight（对于高度大于宽度的图像）和质量。

const query = graphql`
  query {
        f_2: file(relativePath: { eq: "f_2.png" }) {
      childImageSharp {
        fluid(quality: 100, maxWidth: 1000) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`
于 2020-06-14T09:23:01.810 回答