Question

我有一个需要在内部服务器上运行的站点。我没有访问该站点的权限，我将要做gatsby构建并将其公用文件夹。但是我所有的图像都是一片混乱。这是正确的方法吗？以及为什么我的图像模糊

Answer 1

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

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

很难说更多，但没有可复制的示例来检出：） gatsby-image docs非常详尽，我建议您检查一下以了解运行图像时图像的状况{ {1}}，以及您可以调整哪些选项。

希望这会有所帮助！

Answer 2

如果在gatsby-image中看到图像质量不足以显示大图像，则在graphql中应用maxWidth（对于宽度大于高度的图像）/ maxHeight（对于高度大于宽度的图像）和质量查询。

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

当我运行gatsby build

2 个答案: