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

Posted 2023-03-08

【中文标题】不显示内容丰富的文本图像的盖茨比

【英文标题】：Gatsby With Contentful Rich Text Images Not Displaying

【发布时间】：2021-11-24 10:20:53

【问题描述】：

我正在尝试构建文章的详细信息页面，我正在使用 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":
            
         
      
   ]

【问题讨论】：

您是否删除了gatsby clean 的缓存？

我刚才试过了，没有任何改变。不知道我做错了什么，互联网上的信息非常有限。

【参考方案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

【讨论】：

感谢您的回复，似乎仍然无法正常工作：26:23 错误“GatsbyImage”未定义反应/jsx-no-undef 26:42 错误“图像”未定义 no-未定义

我认为问题在于由于某种原因返回的原始 JSON 数据中的实际内容为空白："nodeType":"embedded-asset-block", "content":[] ，它识别出那里有内容，但它似乎看不到其中的实际内容。也许我在 Contentful 中放置图像的方式有问题？

当然你需要像任何其他 React 组件 (import GatsbyImage from "gatsby-plugin-image") 一样导入 GatsbyImage。尝试在return 上方、embedded-asset-block 内添加console.log。如果已打印，则检测到块，否则问题可能出在您上传图像的方式上，但很奇怪。