当我运行 gatsby build 时，gatsby js 有模糊的图像

Question

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

Answer 1

如果您获得具有明显压缩伪影的图像，首先要尝试的是增加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什么，以及您可以调整哪些选项。

希望这可以帮助！