使用react-markdown的renderers优化图片无效?

Question

题目描述

使用 <ReactMarkdown renderers={customRenderers}>{props.dummyPosts.content}</ReactMarkdown>优化图片但是无效！

题目来源及自己的思路

我感觉是没有调用这个方法，但是我看一个视频中就是这样子写的，不知道哪里有问题！

相关代码

import DetailsHeader from "./details-header";
import ReactMarkdown from "react-markdown";
import classes from "../../styles/details-content.module.css"
import Image from "next/image";

function DetailsContent(props) {

    const customRenderers = {
        paragraph(paragraph) {
            const {node} = paragraph

            if (node.children[0].type === 'image') {
                const image = node.children[0]

                return <div className={classes.image}>
                    <Image src={image.url} alt={image.alt} width={600} height={300}/>
                </div>
            }
            return <p>{paragraph.children}</p>
        }
    }


    return <article className={classes.content}>
        <DetailsHeader dummyPosts={props.dummyPosts}/>
        <ReactMarkdown renderers={customRenderers}>{props.dummyPosts.content}</ReactMarkdown>
    </article>
}

export default DetailsContent

markdown中图片路径示例 图片来源于网络：
![图片](https://mmbiz.qpic.cn/sz_mmbiz_png/kte008W0h6JfLlSE7XUKibvhhKzdHdBvgq6vJhyWQXIKwbqla8UfvdbOviaVYrnJ27UCNibC9vfMP8jY6N2Nbr8cw/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1)

你期待的结果是什么？实际看到的错误信息又是什么？

希望有懂的大佬可以指点一下！