如何使用 gatsby-image 设置图像最大宽度答案

【问题标题】：how to set image maxWidth with gatsby-image如何使用 gatsby-image 设置图像最大宽度
【发布时间】：2020-12-22 11:12:50
【问题描述】：

这里是初学者，我不完全理解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>

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

【问题讨论】：

gatsbyjs.org/packages/gatsby-image/…

标签： graphql gatsby gatsby-image

【解决方案1】：

Avoiding stretched images using the fluid type 在 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

【讨论】：

啊！这非常有帮助，谢谢！我尝试实现这一点，但它出错了（“片段“GatsbyImageSharpFluidLimitPresentationSize”不存在。”），我认为是因为 GatsbyContentfulFluid_noBase64 没有presentationWidth 属性或来自您链接的文档 GatsbyImageSharpFluidLimitPresentationSize ......这很奇怪。

【解决方案2】：

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

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

{
  childImageSharp {
    fluid(maxWidth: 500, quality: 100) {
      ...GatsbyImageSharpFluid
      ...GatsbyImageSharpFluidLimitPresentationSize
    }
  }
}

【讨论】：