【问题标题】:gatsby-source-contentful BLOCKS.EMBEDDED_ASSET data is emptygatsby-source-contentful BLOCKS.EMBEDDED_ASSET 数据为空
【发布时间】:2021-08-27 23:26:46
【问题描述】:

我想从富文本内容中显示图像,我遵循文档,但不知何故我的 Json stringify 得到了这个:

{
  "nodeType": "embedded-asset-block",
  "content": [],
  "data": {}
}

你可以看到数据是空的,当我 console.log 不使用文本类型的富文本时,我得到了数据和一个 id

"{\"nodeType\":\"document\",\"data\":{},\"content\":[{\"nodeType\":\"embedded-asset-block\",\"content\":[],\"data\":{\"target\":{\"sys\":{\"id\":\"aciyXa5B0eFpwNev0kUjC\",\"type\":\"Link\",\"linkType\":\"Asset\"}}}}

在我的“剪切”Graphql 下方,是的,我可以 console.log 来自引用的图像数据。

    div4 : contentfulRepeater(name: {eq: "div4"}) {
      h1
      p {
        raw
        references {
          ... on ContentfulAsset {
            contentful_id
            fixed(width: 1600) {
              width
              height
              src
              srcSet
            }
          }
        }        
      }
    }

我如何呈现数据:

<div className="">
            <h2 dangerouslySetInnerHTML={{ __html: data.div4.h1 }} />
            <div>{data.div4.p && renderRichText(data.div4.p, options)}</div>
            <pre>
              <code>{JSON.stringify(data.div4.p.raw, null, 2)}</code>
            </pre>
         </div>

选项

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

【问题讨论】:

    标签: reactjs gatsby contentful richtext


    【解决方案1】:

    您需要在查询中同时添加“contentful_id”和“__typename”

    raw
    references {
      ... on ContentfulAsset {
        contentful_id
        __typename
        fixed(width: 1600) {
    

    【讨论】:

    • 我也有同样的问题,但是这个问题没有解决,有什么建议吗?
    猜你喜欢
    • 2018-07-14
    • 2020-03-20
    • 2021-06-11
    • 1970-01-01
    • 2021-11-20
    • 2020-07-08
    • 1970-01-01
    • 2021-12-16
    • 2019-11-28
    相关资源
    最近更新 更多