Graphql 如何使用盖茨比图像设置图像最大宽度

这里是初学者，我不太懂。我有一个Gatsby模板，它从contentful和graphql中获取标题图像。我希望标题图像是流动的，但我希望它具有图像原始大小的

max width

。所以说，如果jpg最初是800px，我不希望它的规模超过这个。我可以看到graphql位有一个maxWidth属性，但是每个图像都有一个不同的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>

从“React”导入React
从“盖茨比”导入{useStaticQuery，graphql}
从“盖茨比图像”导入Img
const NonStretchedImage=props=>{
让normalizedProps=props
if（道具流体和道具流体显示宽度）{
normalizedProps={
…道具，
风格：{
…（props.style | |{}），
maxWidth:props.fluid.presentationWidth，
边距：“0自动”，//用于使图像居中
},
}
}
返回
}
常量图像=（）=>{
常量数据=useStaticQuery（graphql`
质疑{
占位符图像：文件（relativePath:{eq:“gatsby audion.png”}）{
childImageSharp{
流体（最大宽度：300）{
…盖茨比磁流体
显示宽度
}
}
}
}
`)
返回(
)
}
导出默认图像

在盖茨比图像文档中，建议如下包装图像组件：

<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>

从“React”导入React
从“盖茨比”导入{useStaticQuery，graphql}
从“盖茨比图像”导入Img
const NonStretchedImage=props=>{
让normalizedProps=props
if（道具流体和道具流体显示宽度）{
normalizedProps={
…道具，
风格：{
…（props.style | |{}），
maxWidth:props.fluid.presentationWidth，
边距：“0自动”，//用于使图像居中
},
}
}
返回
}
常量图像=（）=>{
常量数据=useStaticQuery（graphql`
质疑{
占位符图像：文件（relativePath:{eq:“gatsby audion.png”}）{
childImageSharp{
流体（最大宽度：300）{
…盖茨比磁流体
显示宽度
}
}
}
}
`)
返回(
)
}
导出默认图像

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

本质上，如果不使用流体图像来获取父对象的整个空间（宽度/高度），则在graphQL查询中使用此片段

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

---

这在盖茨比的文件中是如此之深，以至于我不敢相信我浪费了这么多时间和演员们在一起

本质上，如果不使用流体图像来获取父对象的整个空间（宽度/高度），则在graphQL查询中使用此片段

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

---

啊!！这非常有帮助，谢谢！但我尝试实现了这一点，但出现了错误（“片段“GatsbyImageSharpFluidLimitRepresentationSize”不存在。”），我认为这是因为GatsbyContentfulFluid\u noBase64没有presentationWidth属性，或者从链接GatsbyImageSharpFluidLimitRepentSize的文档中。。。真奇怪，啊！这非常有帮助，谢谢！但我尝试实现了这一点，但出现了错误（“片段“GatsbyImageSharpFluidLimitRepresentationSize”不存在。”），我认为这是因为GatsbyContentfulFluid\u noBase64没有presentationWidth属性，或者从链接GatsbyImageSharpFluidLimitRepentSize的文档中。。。这很奇怪。