Gatsby js 在我运行 Gatsby build 时图像模糊

Question

我有一个需要在内部服务器上运行的网站。我无法访问该网站，我只是要做盖茨比构建并给他们公共文件夹。但是我所有的图像都是模糊的混乱。这是正确的方法吗？为什么我的图像模糊不清

Answer 1

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

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

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

希望这有帮助！

Answer 2

如果你发现你的图像质量对于gatsby图像中的大图像来说不够好，那么在graphql查询中应用maxWidth(对于宽度大于高度的图像(/maxHeight(对于高度大于宽度的图像(和质量。

const query = graphql`
query {
f_2: file(relativePath: { eq: "f_2.png" }) {
childImageSharp {
fluid(quality: 100, maxWidth: 1000) {
...GatsbyImageSharpFluid
}
}
}
}
`