Question

我正在尝试在我的博客中集成内容丰富的富文本，并且仅使用粗体，段落和斜体。我无法显示图像和嵌入的东西。

首先我有这个组件：

const Content = ({ content }) => {
  return (
    <div className="content-body-contentful">
      {documentToReactComponents(content)}
    </div>
  )
}

然后，在发布页面中，我导入该组件并像这样传递数据：

<Content content={article.fields.body} />

这个问题有答案吗？

Answer 1

以下是通过 Contentful 在 Next.js 中使用图像的示例。您可以类似地实现其余项目。

import Image from 'next/image'

const renderProps = {
    renderNode: {
        [BLOCKS.EMBEDDED_ASSET]: node => {
            let { description, file } = node.data.target.fields

            return (
                <picture>
                    <Image src={file.url} alt={description} />
                </picture>
            )
        },
    },
}
const Content = ({ content }) => {
    return <div className="content-body-contentful">{documentToReactComponents(content, renderProps)}</div>
}

内容丰富的RichText与next.js

1 个答案: