Javascript 我需要添加盖茨比图像到我的网站。需要一些指导吗

我试图用GraphQL添加盖茨比图像。我不需要重写我的整个初学者，我只需要对加载时间进行图像优化。所有的数据查询都是用lodash完成的，所以我很困惑。我知道我错过了一些简单的事情

我正在用标题进行测试，只是想看看我是否正在访问数据。
是否需要将此查询添加到gatsby节点

从“React”导入React；
从“lodash”进口；
从“盖茨比”导入{useStaticQuery，graphql}
从“../components/index”导入{Layout}；
从“../utils”导入{htmlToReact，safePrefix}；
导出默认类Post扩展React.Component{
render（）{
常量数据=useStaticQuery（graphql`
查询postInfo{
所有的标记{
边缘{
节点{
身份证件
前沿物质{
内容\图像\路径
节选
img_路径
字幕
标题
}
}
}
}
}
`)
返回(
{{uu.get（this.props，'pageContext.frontmatter.title'））
{{{.get（this.props，'pageContext.frontmatter.subtitle'）&&
{htmlToReact（u.get（this.props，'pageContext.frontmatter.subtitle'））}
}
{data.allmarkdownmark.title}
{{uu.get（this.props，'pageContext.frontmatter.content\u img\u path'）&&
}
{htmlToReact（uz.get（this.props，'pageContext.html'））}
);
}
}

所有标记备注

表示您正在查询标记而非图像。但你说你只是在测试。如果降价测试成功，您可以确保GraphQL部分工作正常

以下是您链接的文档中的重要代码：

import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
export default () => {
  const data = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "images/default.jpg" }) {
        childImageSharp { // gatsby-image generates this GraphQL node for you
          fluid { // gatsby-image supplies this GraphQL fragment for you
            ...GatsbyImageSharpFluid // gatsby-image supplies this GraphQL fragment for you
          }
        }
      }
    }
  `)
  return (
    <div>
      <h1>Hello gatsby-image</h1>
      <Img
        fluid={data.file.childImageSharp.fluid} // the data supplied by the gatsby-image query
        alt="Gatsby Docs are awesome"
      />
    </div>
  )
}

您的graphQL查询

{
  allFile(
    filter: {
      sourceInstanceName: {eq: "images"} // tell graphQL where to find your images
    },
    sort: {fields: [childImageSharp___fluid___originalName], order: ASC})
  {
    edges {
      node {
      childImageSharp {
          fluid(maxWidth: 300, quality: 50) {
            originalName
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
}

---

非常感谢。我将努力尝试将图像引入。那么，我的相对路径是否可以等于对图像的调用？是的，但有一种更稳健的方法。我编辑了我的答案你能看看我的新问题吗？我想我差不多已经弄明白了。

{
  allFile(
    filter: {
      sourceInstanceName: {eq: "images"} // tell graphQL where to find your images
    },
    sort: {fields: [childImageSharp___fluid___originalName], order: ASC})
  {
    edges {
      node {
      childImageSharp {
          fluid(maxWidth: 300, quality: 50) {
            originalName
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
}