reactjs - 将 imageSharp 添加到 post.js

Question

如果我能得到一些关于将 gastby-image 添加到我的 post.js 的方向。我不知道如何获取查询页面的图像。每次我似乎都无法让变量起作用。使用变量时，我确实删除了 staticQuery。但它返回的只是一个 9 位数字。我想也许我可以把所有的图像都带进来并整理它们，但在那里也没有任何运气。

我将把我的 post.js 和我的创建页面 gatsby-node。谢谢！

post.js

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

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

export default function Post(props) {

  let imageSrc = _.get(props, 'pageContext.image')
  let imageName = imageSrc.slice(8);

  const data = useStaticQuery(graphql`
  query  {
    allImageSharp {
    edges {
      node {
        fluid {
          originalName
         ...GatsbyImageSharpFluid
        }
      }
    }
  }
}
  `)


  const imageNodes = data.allImageSharp.edges.map( node => node ? node : imageName)





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

          <div className="post-content">
            {htmlToReact(_.get(props, 'pageContext.html'))}
          </div>
        </article>
      </Layout>
    );
        }

盖茨比-node.js

const path = require("path");
const {createFilePath} = require("gatsby-source-filesystem");
const _ = require('lodash');


function findFileNode({node, getNode}) {
    let fileNode = node;
    let ids = [fileNode.id];

    while (fileNode && fileNode.internal.type !== `File` && fileNode.parent) {
        fileNode = getNode(fileNode.parent);

        if (!fileNode) {
            break;
        }

        if (_.includes(ids, fileNode.id)) {
            console.log(`found cyclic reference between nodes`);
            break;
        }

        ids.push(fileNode.id);
    }

    if (!fileNode || fileNode.internal.type !== `File`) {
        console.log('did not find ancestor File node');
        return null;
    }

    return fileNode
}

exports.onCreateNode = ({node, getNode, actions}, options) => {

    const {createNodeField} = actions;

    if (node.internal.type === "MarkdownRemark") {
        let fileNode = findFileNode({node, getNode});
        if (!fileNode) {
            throw new Error('could not find parent File node for MarkdownRemark node: ' + node);
        }

        let url;
        if (node.frontmatter.url) {
            url = node.frontmatter.url;
        } else if (_.get(options, 'uglyUrls', false)) {
            url = path.join(fileNode.relativeDirectory, fileNode.name + '.html');
        } else {
            url = createFilePath({node, getNode});
        }

        createNodeField({node, name: "url", value: url});
        createNodeField({node, name: "absolutePath", value: fileNode.absolutePath});
        createNodeField({node, name: "relativePath", value: fileNode.relativePath});
        createNodeField({node, name: "absoluteDir", value: fileNode.dir});
        createNodeField({node, name: "relativeDir", value: fileNode.relativeDirectory});
        createNodeField({node, name: "base", value: fileNode.base});
        createNodeField({node, name: "ext", value: fileNode.ext});
        createNodeField({node, name: "name", value: fileNode.name});
    }
};

exports.createPages = ({graphql, getNode, actions, getNodesByType}) => {
    const {createPage, deletePage} = actions;

    // Use GraphQL to bring only the "id" and "html" (added by gatsby-transformer-remark)
    // properties of the MarkdownRemark nodes. Don't bring additional fields
    // such as "relativePath". Otherwise, Gatsby's GraphQL resolvers might infer
    // types these fields as File and change their structure. For example, the
    // "html" attribute exists only on a GraphQL node, but does not exist on the
    // underlying node.
    return graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            id
            html
          }
        }
      }
    }
    `).then(result => {
        if (result.errors) {
            return Promise.reject(result.errors);
        }

        const nodes = result.data.allMarkdownRemark.edges.map(({node}) => node);
        const siteNode = getNode('Site');
        const siteDataNode = getNode('SiteData');
        const sitePageNodes = getNodesByType('SitePage');
        const sitePageNodesByPath = _.keyBy(sitePageNodes, 'path');

        const pages = nodes.map(graphQLNode => {
            // Use the node id to get the underlying node. It is not exactly the
            // same node returned by GraphQL, because GraphQL resolvers might
            // transform node fields.
            const node = getNode(graphQLNode.id);
            return {
                url: node.fields.url,
                relativePath: node.fields.relativePath,
                relativeDir: node.fields.relativeDir,
                base: node.fields.base,
                name: node.fields.name,
                frontmatter: node.frontmatter,
                html: graphQLNode.html
            };
        });

        nodes.forEach(graphQLNode => {
            const node = getNode(graphQLNode.id);
            const url = node.fields.url;
            const template = node.frontmatter.template;
            const component = path.resolve(`./src/templates/${template}.js`);

            const existingPageNode = _.get(sitePageNodesByPath, url);
            if (existingPageNode) {
                deletePage(existingPageNode);
            }

            const page = {
                path: url,
                component: component,
                context: {
                    url: url,
                    relativePath: node.fields.relativePath,
                    relativeDir: node.fields.relativeDir,
                    base: node.fields.base,
                    name: node.fields.name,
                    frontmatter: node.frontmatter,
                    image: node.frontmatter.content_img_path,
                    html: graphQLNode.html,
                    pages: pages,
                    site: {
                        siteMetadata: siteNode.siteMetadata,
                        pathPrefix: siteNode.pathPrefix,
                        data: _.get(siteDataNode, 'data', null)
                    }
                }
            };

            if (existingPageNode && !_.get(page, 'context.menus')) {
                page.context.menus = _.get(existingPageNode, 'context.menus');
            }

            createPage(page);
        });
    });
};