小编Max*_*ack的帖子

上下文：我有一个带有Chakra UI的Next.js网站。我有一些用户提供的 Markdown 内容，这些内容是在运行时从外部源（例如，存储库的 GitHub）获取的。README.md

现在，默认情况下，react-markdown（基于remarkjs）使用 HTML<img>标签来标记图像 ( ![]())。我想在用户提供的 markdown 中使用Next.js 10 中发布的新组件。<Image />此外，我还想用相应的 Chakra UI 组件替换其他标签。

我该怎么做呢？

解决方案

// utils/parser.tsx

import Image from 'next/image';

export default function ImageRenderer({ src, alt }) {
  return <Image src={src} alt={alt} unsized />;
}

然后在需要的页面中：

//pages/readme.tsx

import ReactMarkdown from 'react-markdown';
import imageRenderer from '../utils/parser';

// `readme` is sanitised markdown that comes from getServerSideProps
export default function Module({ readme }) …