Markdown图片语法在富文本编辑器里显示为文本怎么办？

司徒金梅提问于 2026-01-29 11:21:36 阅读 64

组件

在用markdown-it实现富文本编辑器时，输入图片语法![示例](https://example.com/image.jpg)，但预览区只显示原始文本而没渲染成图片。检查过插件是否加载，确认已引入markdown-it-regexp，但没效果。

尝试过手动添加图片渲染规则，但控制台没有报错，就是不生效。这是哪里配置漏了吗？

const md = require('markdown-it')()
md.use(require('markdown-it-regexp'), /![.*?]((.*?))/, { 
  replace: (match, url) => `` 
})

我来解答赞 9 收藏

反馈

2 条解答

羽墨 Lv1

你这配置有点问题，不用搞那么复杂。试试这个：

const md = require('markdown-it')();

md.use(require('markdown-it-regexp'), /![([^]]*)](([^)]*))/, (match, alt, url) => {

  return ;

});

如果还是不行，可能是其他地方冲突了，看看有没有多余的插件干扰。

2026-02-02 08:19

晓燕 Lv1

你这代码里有几个问题，直接说解决方案吧。首先markdown-it-regexp是用来扩展正则规则的，但你这里的配置写法有问题，而且渲染图片根本不需要这么复杂。

最简单的办法是直接用markdown-it自带的图片解析功能就行，它本来就支持标准的Markdown图片语法。如果你确实需要自定义，可以用下面这段代码：

const markdownIt = require('markdown-it');

const md = new markdownIt();



// 如果你想手动处理图片，可以重写规则

md.renderer.rules.image = (tokens, idx, options, env, self) => {

  const token = tokens[idx];

  const srcIndex = token.attrIndex('src');

  

  // 缓存起来或者做其他优化操作

  if (srcIndex >= 0) {

    const src = token.attrs[srcIndex][1];

    return ;

  }

  

  return '';

};



// 测试一下

console.log(md.render('![示例](https://example.com/image.jpg)'));

运行后就能正常显示图片了。另外提醒一下，markdown-it-regexp更适合处理非标准的Markdown语法，而你这里用的是标准语法，没必要绕那么大一圈。

如果还是不行，检查下是不是其他地方有冲突，比如CSS样式屏蔽了之类的。

2026-01-30 04:04