无法使用 Gatsby.js

如何解决无法使用 Gatsby.js

因此，我正在为本地企业建立一个网站，他们可以在其中使用内容丰富的 cms（类似于以前工作的博客）添加以前的工作（一种翻新类型的业务）。

我遇到的问题是我需要显示在内容丰富的文本字段中定义的每个作业的内容。

我将向您展示我的项目组件（它是通过 gatsby create pages api 创建页面的模板），它是：

    import React from 'react';
    import { graphql } from 'gatsby';
    import { documentToReactComponents } from "@contentful/rich-text-react-renderer"
    import { BLOCKS } from "@contentful/rich-text-types"
    import Layout from '../components/layout';
    
    
    const Project = ({data}) => {
        const RichContent = JSON.parse(data.contentfulProject.projectContent.raw);
        const options = {
            renderNode: {
                [BLOCKS.HEADING_1]: (node,children) => <h1>{children}</h1>,// [BLOCKS.EMBEDDED_ASSET]:  <img src={`https:${data.contentfulProject.projectContent.references.fluid.src}`}/>,},renderMark: {},}
        console.log(data)
        return (
            <Layout>
                
                {documentToReactComponents(RichContent,options)}
            </Layout>
        )
    }
    
    export default Project;
    
    export const query = graphql`
        query($id: String!) {
            contentfulProject(id: {eq: $id}) {
                    title
                    projectContent  {
                        raw
                        references {
                                fluid {
                                        src
                                        
                                    }
                            }
                        }
                    }
                }
    `

所以实际上我设法成功地呈现了文本字段，但是当我取消注释 [BLOCKS.EMBEDED_ASSET] 时，由于缺少数据而分页。图像不显示。

我的猜测是我在查询 contentfull 数据时无法访问 json 字段，我只能返回原始字段。

请帮忙:D

---

设法解决了这个问题，这里是正确显示图像的工作组件的代码：

import React from 'react'
import { graphql } from 'gatsby';
import { renderRichText } from "gatsby-source-contentful/rich-text"
import { BLOCKS } from "@contentful/rich-text-types"

import Layout from '../components/layout'


function ProjectTemplate({ data }) {
  const {projectContent} = data.contentfulProject
  console.log(projectContent)

  const options = {
    renderMark: {},renderNode: {
      [BLOCKS.PARAGRAPH]: (node,children) => <p>{children}</p>,[BLOCKS.EMBEDDED_ASSET]: node => {
        return (
            <img src={`https:${node.data.target.fixed.src}`}/>
        )
      },}

  return (
    <div>
      <Layout>
      {renderRichText(projectContent,options)}
      </Layout>
    </div>
  )
}

export default ProjectTemplate

export const query = graphql`
  query($id: String!) {
    contentfulProject(id: {eq: $id}) {
                contentful_id
                title
                slug
              projectContent {           
                raw
                references {
                  ... on ContentfulAsset {
                    contentful_id
                    __typename
                    fixed(width: 1600) {
                      width
                      height
                      src
                      srcSet
                    }
                  }
                }
              }
            }
          }
`