1

这里的初学者，我不完全理解gatsby-image。我有一个 Gatsby 模板，它使用 graphql 从内容中获取标题图像。我希望标题图像是流畅的，但我希望它具有max-width图像的原始大小。所以说如果jpg最初是800px，我不希望它超出这个范围。我可以看到 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>

非常感谢任何帮助，谢谢。

4

2 回答 2

3

避免使用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
于 2020-05-06T10:13:42.620 回答
2

这在 gatsby 文档中是如此之深，以至于我无法相信我浪费了这么多时间来玩 div。

本质上，如果您不让流体图像占据父级的整个空间（宽度/高度），那么您可以在 graphQL 查询中使用这个片段。

{
  childImageSharp {
    fluid(maxWidth: 500, quality: 100) {
      ...GatsbyImageSharpFluid
      ...GatsbyImageSharpFluidLimitPresentationSize
    }
  }
}
于 2020-12-22T03:12:50.113 回答