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

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”下的“content”数组：“embedded-asset-block”为空。

{
   "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

Answer 2

我已经尝试过了

const { gatsbyImageData, description } = node.data.target
<GatsbyImage
   image={getImage(gatsbyImageData)}
   alt={description}
   style={{ width: 200, height: 200 }}
   className="mb-10"
/>

不起作用。它会弹出一个错误 - 有问题的道具类型：道具

image

在

GatsbyImage

中被标记为必需，但其值为

undefined

。

它返回一个带有 LinkType:Assets,type="Link"..

的 Sys 对象

任何人都可以指导我如何从该对象获取链接的资产吗？