【发布时间】: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