如何实现marked.js自定义图片渲染与路径前缀处理

marked.js是一款轻量高效的Markdown解析库，在前端项目中常被用来将Markdown文本转换为HTML内容。默认情况下，marked.js会直接按照Markdown中书写的图片路径生成img标签，当项目需要统一为图片添加路径前缀时，就需要自定义图片渲染逻辑。

marked.js自定义渲染器基础

marked.js提供了Renderer类，允许开发者重写默认的渲染方法。要自定义图片渲染，首先需要创建渲染器实例，然后重写image方法，最后将渲染器传入marked的配置中。

基础的自定义渲染器使用结构如下：

// 引入marked
import { marked, Renderer } from 'marked';

// 创建自定义渲染器实例
const renderer = new Renderer();

// 重写image方法，后续在这里添加路径前缀逻辑
renderer.image = function(href, title, text) {
  // 默认返回img标签的逻辑
  let out = '<img src="' + href + '" alt="' + text + '"';
  if (title) {
    out += ' title="' + title + '"';
  }
  out += ' />';
  return out;
};

// 配置marked使用自定义渲染器
marked.setOptions({
  renderer: renderer
});

实现图片路径前缀处理

核心需求是在图片路径不是绝对路径的情况下，自动添加指定的前缀。首先需要判断传入的href是否是绝对路径，如果是绝对路径或者已经是带前缀的路径，就直接返回，否则拼接前缀。

路径判断逻辑

判断路径是否为绝对路径的常见方式是检查是否以http://、https://或者//开头，这类路径不需要添加前缀。

完整实现代码

以下是添加路径前缀的完整实现，假设我们需要为所有相对路径的图片添加/static/images/前缀：

import { marked, Renderer } from 'marked';

// 定义图片路径前缀
const IMAGE_PREFIX = '/static/images/';

const renderer = new Renderer();

// 重写image渲染方法
renderer.image = function(href, title, text) {
  let finalHref = href;
  // 判断是否为绝对路径，绝对路径不需要加前缀
  const isAbsolutePath = /^https?:///.test(href) || /^///.test(href);
  // 如果已经是带前缀的路径也不需要重复添加
  const hasPrefix = href.startsWith(IMAGE_PREFIX);
  if (!isAbsolutePath && !hasPrefix) {
    // 拼接前缀，处理href开头是否有斜杠的情况
    finalHref = IMAGE_PREFIX + (href.startsWith('/') ? href.slice(1) : href);
  }
  // 生成img标签
  let out = '<img src="' + finalHref + '" alt="' + text + '"';
  if (title) {
    out += ' title="' + title + '"';
  }
  out += ' />';
  return out;
};

// 配置marked
marked.setOptions({
  renderer: renderer
});

// 测试示例
const markdownText = '![测试图片](test.png) ![绝对路径图片](https://ipipp.com/test.jpg)';
const html = marked(markdownText);
console.log(html);
// 输出结果：
// <p><img src="/static/images/test.png" alt="测试图片" /> <img src="https://ipipp.com/test.jpg" alt="绝对路径图片" /></p>

常见场景适配

CDN前缀场景

如果项目使用CDN存储图片，只需要将IMAGE_PREFIX修改为CDN域名即可：

const IMAGE_PREFIX = 'https://cdn.ipipp.com/images/';

按环境切换前缀

可以根据当前运行环境动态设置前缀，比如开发环境使用本地前缀，生产环境使用CDN前缀：

const isProd = process.env.NODE_ENV === 'production';
const IMAGE_PREFIX = isProd ? 'https://cdn.ipipp.com/images/' : '/local-images/';

注意事项

• 重写image方法时，需要保证返回的字符串是符合HTML规范的img标签，避免生成错误的HTML结构。
• 如果Markdown中的图片路径包含查询参数或者哈希值，需要在拼接前缀时保留这些部分，上述代码的逻辑已经兼容了这种情况。
• 如果项目同时使用了marked的其他插件，需要确保自定义渲染器的配置不会和其他插件的逻辑冲突。

marked.js自定义渲染器图片渲染路径前缀处理Markdown解析修改时间：2026-06-13 01:39:32