不显示内容丰富的文本图像的盖茨比

Question

我正在尝试构建文章的详细信息页面，我正在使用 Contentful CMS 来显示内容。我可以让它显示文本，但不能让它显示图像。

Details.js 页面

import React from 'react'
import { graphql } from 'gatsby'
import Layout from '../../components/layout'
import { renderRichText } from "gatsby-source-contentful/rich-text"
import { BLOCKS, MARKS } from '@contentful/rich-text-types';

export default function ProjectDetails({ data, location }) {

    const { title, subtitle, details } = data.allContentfulProject.nodes[0]

    const Bold = ({ children }) => <span className="bold">{children}</span>;

    const Text = ({ children }) => <p className="align-center">{children}</p>;

    const options = {
        renderMark: {
            [MARKS.BOLD]: (text) => <Bold>{text}</Bold>,
        },
        renderNode: {
            [BLOCKS.PARAGRAPH]: (node, children) => <Text>{children}</Text>,
            [BLOCKS.EMBEDDED_ASSET]: node => {
                return (
                    <>
                        <h2>Embedded Asset</h2>
                        <pre>
                            <code>{JSON.stringify(node, null, 2)}</code>
                        </pre>
                    </>
                )
            },
        },
    };

    return (

        <Layout>
            <div>
                <h1>{title}</h1>
                <h2>{subtitle}</h2>
                <p>{renderRichText(details, options)}</p>
            </div>
        </Layout>
    )
}

export const query = graphql`
query getThisProjectBySlug($slug: String) {
    allContentfulProject(filter: {slug: {eq: $slug}}) {
      nodes {
        slug
        id
        subtitle
        title
        details {
          raw
          references {
            file {
              url
            }
          }
        }
      }
    }
  }
  
  `
 

内容丰富的富文本 JSON，如您所见，它检测到有两个图像但看不到文件源； "nodeType":"embedded-asset-block" 下的 "content" 数组为空。

{
   "nodeType":"document",
   "data":{
      
   },
   "content":[
      {
         "nodeType":"paragraph",
         "content":[
            {
               "nodeType":"text",
               "value":"this is a test project :) ",
               "marks":[
                  
               ],
               "data":{
                  
               }
            }
         ],
         "data":{
            
         }
      },
      {
         "nodeType":"embedded-asset-block",
         "content":[
            
         ],
         "data":{
            "target":{
               "sys":{
                  "id":"rqEe5eH8P201VsVhqDAHc",
                  "type":"Link",
                  "linkType":"Asset"
               }
            }
         }
      },
      {
         "nodeType":"paragraph",
         "content":[
            {
               "nodeType":"text",
               "value":"hello more text",
               "marks":[
                  
               ],
               "data":{
                  
               }
            }
         ],
         "data":{
            
         }
      },
      {
         "nodeType":"embedded-asset-block",
         "content":[
            
         ],
         "data":{
            "target":{
               "sys":{
                  "id":"1WoarVHbjoQeTLawvMBMaj",
                  "type":"Link",
                  "linkType":"Asset"
               }
            }
         }
      },
      {
         "nodeType":"paragraph",
         "content":[
            {
               "nodeType":"text",
               "value":"",
               "marks":[
                  
               ],
               "data":{
                  
               }
            }
         ],
         "data":{
            
         }
      }
   ]
}

Answer 1

尝试以下方法：

import React from 'react'
import { graphql } from 'gatsby'
import Layout from '../../components/layout'
import { renderRichText } from "gatsby-source-contentful/rich-text"
import { BLOCKS, MARKS } from '@contentful/rich-text-types';

export default function ProjectDetails({ data, location }) {

    const { title, subtitle, details } = data.allContentfulProject.nodes[0]

    const Bold = ({ children }) => <span className="bold">{children}</span>;

    const Text = ({ children }) => <p className="align-center">{children}</p>;

    const options = {
        renderMark: {
            [MARKS.BOLD]: (text) => <Bold>{text}</Bold>,
        },
        renderNode: {
            "embedded-asset-block": node => {
              const { gatsbyImageData } = node.data.target
              if (!gatsbyImageData) {
                // asset is not an image
                return null
              }
              return <GatsbyImage image={image} />
            },
            [BLOCKS.PARAGRAPH]: (node, children) => <Text>{children}</Text>,
            [BLOCKS.EMBEDDED_ASSET]: node => {
                return (
                    <>
                        <h2>Embedded Asset</h2>
                        <pre>
                            <code>{JSON.stringify(node, null, 2)}</code>
                        </pre>
                    </>
                )
            },
        },
    };

    return (

        <Layout>
            <div>
                <h1>{title}</h1>
                <h2>{subtitle}</h2>
                <p>{renderRichText(details, options)}</p>
            </div>
        </Layout>
    )
}

export const query = graphql`
query getThisProjectBySlug($slug: String) {
    allContentfulProject(filter: {slug: {eq: $slug}}) {
      nodes {
        slug
        id
        subtitle
        title
        details {
          raw
          references {
            file {
              url
            }
          }
        }
      }
    }
  }
  
  `

修改自：https://www.gatsbyjs.com/plugins/gatsby-source-contentful/#embedding-an-image-in-a-rich-text-field

渲染节点的键（renderNode）需要显示一个GatsbyImage组件。

以防万一，在解构之前检查node以查看内部结构：

const { gatsbyImageData } = node.data.target