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

Начинающий здесь, я не совсем понимаю 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>

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


gatsby graphql gatsby-image
person StephD    schedule 06.05.2020    source источник
comment
gatsbyjs.org/packages/gatsby -image /   -  person ksav    schedule 06.05.2020

Ответы (2)


arrow_upward
3
arrow_downward

Как избежать растянутых изображений с использованием типа жидкости в документации для 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
person ksav    schedule 06.05.2020
comment
А! это очень полезно, спасибо! Я попытался реализовать это, но он выдает ошибки (фрагмент GatsbyImageSharpFluidLimitPresentationSize не существует.), Я думаю, потому что GatsbyContentfulFluid_noBase64 не имеет свойства PresentationWidth или из документов, которые вы связали GatsbyImageSharpFluidLimitPresentationSize ... - person StephD; 07.05.2020

arrow_upward
2
arrow_downward

Это настолько глубоко в документах Гэтсби, что я не могу поверить, что потратил так много времени на игры с div.

По сути, если вы не хотите, чтобы жидкое изображение занимало все пространство родительского элемента (ширина / высота), вы используете этот фрагмент в запросе graphQL.

{
  childImageSharp {
    fluid(maxWidth: 500, quality: 100) {
      ...GatsbyImageSharpFluid
      ...GatsbyImageSharpFluidLimitPresentationSize
    }
  }
}
person Munib    schedule 22.12.2020