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

Question

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

Answer 1

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

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

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

希望这会有所帮助!