как установить maxWidth изображения с помощью gatsby-image

Question

Здесь новичок, я не совсем понимаю gatsby-image . У меня есть шаблон Gatsby, который извлекает изображение заголовка из контента с помощью graphql. Я хочу, чтобы изображение заголовка было плавным, но я хочу, чтобы оно имело max-width исходного размера изображения. Скажем, если jpg изначально был 800 пикселей, я не хочу, чтобы он масштабировался дальше этого. Я вижу, что бит graphql имеет свойство maxWidth, но каждое изображение будет иметь разную максимальную ширину. Я думаю, мне нужно изменить способ генерации srcset, но не знаю, как это сделать.

в моем шаблоне соответствующие биты:

export const query = graphql`
  query($slug: String!) {
    contentfulWork(slug: { eq: $slug }) {
      title
      heroImage {
        title
        fluid(maxWidth: 1800) {
          ...GatsbyContentfulFluid_noBase64
        }
        file {
          url
          contentType
        }
      }
    }
  }
`

и в возвращении

  <Img
        fluid={props.data.contentfulWork.heroImage.fluid}
        alt={props.data.contentfulWork.heroImage.title}
  />

Выводимый код выглядит так:

<picture>
    <source srcset="//myimage.gif?w=450&amp;h=298&amp;q=50 450w,
        //myimage.gif?w=900&amp;h=596&amp;q=50 900w,
        //myimage.gif?w=940&amp;h=622&amp;q=50 940w" 
        sizes="(max-width: 1800px) 100vw, 1800px">
 <img sizes="(max-width: 1800px) 100vw, 1800px" 
    srcset="//myimage.gif?w=450&amp;h=298&amp;q=50 450w,
            //myimage.gif?w=900&amp;h=596&amp;q=50 900w,
            //myimage.gif?w=940&amp;h=622&amp;q=50 940w"
        src="//myimage.gif?w=1800&amp;q=50" 
        alt="mygif" loading="lazy"
        style="position: absolute; top: 0px; left: 0px; 
        width: 100%; height: 100%;
        object-fit: cover; object-position: center center; 
        opacity: 1;"
    >
</picture>

любая помощь очень ценится, спасибо.

Answer 1

Чтобы избежать растянутых изображений с использованием типа жидкости в документации для gatsby-image предлагается обернуть компонент изображения следующим образом:

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

const NonStretchedImage = props => {
  let normalizedProps = props
  if (props.fluid && props.fluid.presentationWidth) {
    normalizedProps = {
      ...props,
      style: {
        ...(props.style || {}),
        maxWidth: props.fluid.presentationWidth,
        margin: "0 auto", // Used to center the image
      },
    }
  }

  return <Img {...normalizedProps} />
}

const Image = () => {
  const data = useStaticQuery(graphql`
    query {
      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
        childImageSharp {
          fluid(maxWidth: 300) {
            ...GatsbyImageSharpFluid
            presentationWidth
          }
        }
      }
    }
  `)

  return (
    <NonStretchedImage fluid={data.placeholderImage.childImageSharp.fluid} />
  )
}

export default Image