1

我在 Gatsby 网站上工作，并从 Sanity.io 采购我的内容。与通过我自己的文件系统获取的图像相比，我从 Sanity.io CDN 返回的一些图像质量显着降低。我认为这与设置的图像尺寸不正确有关，但我无法弄清楚为什么它错误地设置了此图像。我正在尝试使用 gatsby-image 渲染这两个元素。

彼此相邻加载的图像的屏幕截图：

画质对比

我的 graphQL 查询：

const HEADER_QUERY = graphql`
  query HeaderQuery {
    HeaderImages: sanityHomepageSettings {
      heroOverlayImage {
        asset {
          fluid(maxWidth: 300) {
            ...GatsbySanityImageFluid
          }
        }
      }
    }
    LocalHeaderImages: file(relativePath: {eq: "happy.png"}) {
      childImageSharp {
        fluid(maxWidth: 300) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

我在哪里渲染这两个图像：

<div style={{backgroundColor: 'white', width: '100%'}}>
  <Img fluid={data.HeaderImages.heroOverlayImage.asset.fluid} />
  <Img fluid={data.LocalHeaderImages.childImageSharp.fluid} />
</div>

当我检查我的 devtools 中的图像元素时，我可以看到来自 sanity 的图像的currentSrc如下：

https://cdn.sanity.io/images/<environment-removed>/production/<long-name-removed>-275x132.png?w=150&h=72&fit=crop&fm=webp

看起来这里设置的图像尺寸不正确，因为宽度和高度约为原始图像的 50%。从上面的字符串可以看出，w=150&h=72似乎正在调整图像大小。

最后，在启动 Gatsby 环境时，我在控制台中收到以下警告：

warn: The type `SanityImageAsset` does not explicitly define the field `childImageSharp`. On types with the `@dontInfer` directive, or with the `infer` extension set to `false`, automatically

这里有什么不正确的地方，还是我在设置过程中遗漏了什么？作为说明，我已经清除并重新安装了我的节点模块、公共和缓存文件夹。

4

1 回答 1

0

只需像这样增加值maxwidth：

fluid(maxWidth: 300)

在您的 GraphQL 查询中。

于 2020-12-14T01:50:41.480 回答