Получение изображения Гэтсби из Sanity.io приводит к рендерингу низкого качества и небольшого размера. - PullRequest
Новая
       105

Получение изображения Гэтсби из Sanity.io приводит к рендерингу низкого качества и небольшого размера.

0 голосов
/ 27 мая 2020

Я работаю над сайтом Gatsby и получаю свой контент из Sanity.io. Некоторые из изображений, которые я получаю из CDN Sanity.io, имеют значительно худшее качество по сравнению с изображениями, которые я получаю через свою собственную файловую систему. Я думаю, что это как-то связано с установленным неправильным размером изображения, но я не могу понять, почему он устанавливает это изображение неправильно. Я пытаюсь визуализировать оба этих элемента с помощью gatsby-image.

Скриншот изображений, загруженных рядом друг с другом:

image quality comparison

Мой запрос 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>

Когда я проверяю элементы изображения в своих инструментах разработки, я вижу, что currentSr c для изображения, полученного из здравомыслия, выглядит следующим образом: 

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

Есть ли здесь что-то, что я сделал неправильно, или что-то мне не хватает в рамках моей настройки? В качестве примечания, я очистил и переустановил свои модули узлов, publi c и папки кеширования.

...