Gatsby 人们如何在现实世界中使用盖茨比形象？

我一直在学习本教程，但普通人无法编写50行代码来添加图像：

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

export default ({ data }) => {
  // Set up the array of image data and `media` keys.
  // You can have as many entries as you'd like.
  const sources = [
    data.mobileImage.childImageSharp.fluid,
    {
      ...data.desktopImage.childImageSharp.fluid,
      media: `(min-width: 768px)`,
    },
  ]

  return (
    <div>
      <h1>Hello art-directed gatsby-image</h1>
      <Img fluid={sources} />
    </div>
  )
}

export const query = graphql`
  query {
    mobileImage: file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        fluid(maxWidth: 1000, quality: 100) {
          ...GatsbyImageSharpFluid
        }
      }
    }
    desktopImage: file(
      relativePath: { eq: "blog/avatars/kyle-mathews-desktop.jpeg" }
    ) {
      childImageSharp {
        fluid(maxWidth: 2000, quality: 100) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

和插件配置

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: props.imageRootFolder,
        name: 'images',
      },
    },

---

我使用通用的

图像

组件：

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

export default (props) => {

  const { filename, type = 'default', alt, sizes = '(max-width: 400px) 100px, (max-width: 800px) 200px, 400px' } = props;

  const images = useStaticQuery(graphql`
    query ImageQuery {
      data: allFile {
        edges {
          node {
            relativePath
            default: childImageSharp {
              fluid {
                ...GatsbyImageSharpFluid
              }
            }
            square: childImageSharp {
              fluid(maxWidth: 600, maxHeight: 600) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `);

  const image = images.data.edges.find(n => {
    return n.node.relativePath.includes(filename);
  });

  if (!image) {
    return null;
  }

  return (
    <Img alt={alt} fluid={{
      ...image.node[type].fluid,
      sizes: sizes,
    }} />
  )
}

从“React”导入React
从“盖茨比图像”导入Img
从“盖茨比”导入{useStaticQuery，graphql}
导出默认值（道具）=>{
常量{filename，type='default'，alt，size='（最大宽度：400px）100px，（最大宽度：800px）200px，400px'}=props；
const images=useStaticQuery（graphql`
查询图像查询{
数据：所有文件{
边缘{
节点{
相对速度
默认值：childImageSharp{
流质{
…盖茨比磁流体
}
}
正方形：childImageSharp{
流体（最大宽度：600，最大高度：600）{
…盖茨比磁流体
}
}
}
}
}
}
`);
const image=images.data.edges.find（n=>{
返回n.node.relativePath.includes（文件名）；
});
如果（！图像）{
返回null；
}
返回(
)
}

然后我传递文件名和alt文本（以及可选的类型和大小）

---

我同意这是一个解决办法，直到我们得到类似的东西。如果您阅读该页面，您将看到您的问题作为示例。

看起来不错，但如果您需要该查询的变体，您将需要创建一个新组件，对吗？我需要一个固定和流体图像的组合。这似乎是一个巨大的交易。。。不管怎样，我们希望它在q 2.0中得到修复实际上，您可以将它放在一个带别名的查询中。类似于：``square:childImageSharp{fluid（maxWidth:600，maxHeight:600）{……GatsbyImageSharpFluid}}fluid:childImageSharp{fluid{……GatsbyImageSharpFluid}修复：childImageSharp{fixed{…GatsbyImageSharpFluid}}``我编辑了我的原始答案并添加了一个“type”您可以将其用于查询的不同变体。您可以将其扩展为包含流体/固定变体。现在它应该被重构为一个选项对象，但您明白了。我明白您的意思。现在我们将为每种类型创建大量图像，对不对？但在运行时，这可能会非常缓慢，因为它需要循环所有类型要渲染的图像：

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

export default (props) => {

  const { filename, type = 'default', alt, sizes = '(max-width: 400px) 100px, (max-width: 800px) 200px, 400px' } = props;

  const images = useStaticQuery(graphql`
    query ImageQuery {
      data: allFile {
        edges {
          node {
            relativePath
            default: childImageSharp {
              fluid {
                ...GatsbyImageSharpFluid
              }
            }
            square: childImageSharp {
              fluid(maxWidth: 600, maxHeight: 600) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `);

  const image = images.data.edges.find(n => {
    return n.node.relativePath.includes(filename);
  });

  if (!image) {
    return null;
  }

  return (
    <Img alt={alt} fluid={{
      ...image.node[type].fluid,
      sizes: sizes,
    }} />
  )
}

 <Image alt="Gravity does not apply to cats" type="square" filename="cat-defies-gravity.png" />