0

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

我正在测试一个标题只是为了看看我是否正在访问数据。
我需要将此查询添加到 gatsby-node 吗？

import React from 'react';
import _ from 'lodash';
import { useStaticQuery, graphql } from "gatsby"

import { Layout } from '../components/index';
import { htmlToReact, safePrefix } from '../utils';

export default class Post extends React.Component {
  render() {

    const data = useStaticQuery(graphql`
    query postInfo {
  allMarkdownRemark {
    edges {
      node {
        id
        frontmatter {
          content_img_path
          excerpt
          img_path
          subtitle
          title
        }
      }
    }
  }
}
  `)

    return (
      <Layout {...this.props}>
        <article className="post post-full">
          <header className="post-header">
            <div className="post-meta">
            </div>
            <h1 className="post-title">{_.get(this.props, 'pageContext.frontmatter.title')}</h1>
          </header>
          {_.get(this.props, 'pageContext.frontmatter.subtitle') &&
            <div className="post-subtitle">
              {htmlToReact(_.get(this.props, 'pageContext.frontmatter.subtitle'))}
            </div>
          }


          <h3>{data.allMarkdownRemark.title}</h3>


          {_.get(this.props, 'pageContext.frontmatter.content_img_path') &&
            <div className="post-thumbnail">
              <img className="thumbnail" src={safePrefix(_.get(this.props, 'pageContext.frontmatter.content_img_path'))} alt={_.get(this.props, 'pageContext.frontmatter.title')} />
            </div>
          }
          <div className="post-content">
            {htmlToReact(_.get(this.props, 'pageContext.html'))}
          </div>
        </article>   
      </Layout>
    );
  }
}

4

1 回答 1

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
          }
        }
      }
    }
  }
}
于 2020-03-31T09:45:33.563 回答