Question

我正在尝试使用GraphQL添加gatsby图像。我不需要重写我的整个启动器，我只想优化图像加载时间。所有的数据查询都是用lodash完成的，所以我很困惑。我知道在documentation之后我缺少一些简单的东西。

我正在用标题进行测试，以查看是否正在访问数据。
我是否需要将此查询添加到gatsby-node？

item

Answer 1

allMarkdownRemark表示您要查询的是降价而不是图片。但是你说你只是在测试。如果降价测试成功，则可以确定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>
  )
}

Do I need to add this query to gatsby-node?不，您不会。 gatsby-node.js用于以编程方式生成页面。您可以独立于任何gatsby-image代码使用gatsby-node.js。

编辑

您需要通过配置数据源来告诉gatsby-image在哪里找到您的图像。最简单的方法是在gatsby-plugin-filesystem中使用gatsby-config.js：

{
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/images`,
        name: "images",
      },
},

您的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
          }
        }
      }
    }
  }
}

我需要将gatsby图像添加到我的网站。需要一些方向

1 个答案:

编辑