FrontMatter Markdown自定义渲染修改img src的实现方法咨询

核心思路 #

你使用的Frontmatter markdown loader原生支持覆盖markdown标签对应的渲染组件，直接自定义img组件替换默认渲染逻辑即可，不需要事后操作DOM。

具体实现步骤 #

• 编写自定义Img组件，内部统一处理CDN前缀拼接

const CustomImg = (props: React.ImgHTMLAttributes<HTMLImageElement>) => {
  // 仅对本地相对路径资源加CDN前缀，跳过外链图片
  const processedSrc = props.src?.startsWith('/') 
    ? `https://cdn.net${props.src}`
    : props.src;
  return <img {...props} src={processedSrc} alt={props.alt || ''} />;
};

• 在渲染markdown内容时，传入自定义组件覆盖默认img渲染逻辑

// 引入解析后的markdown内容
import { react: MarkdownContent } from './target-document.md';

const RenderPage = () => {
  return (
    <div className="markdown-container">
      <MarkdownContent 
        components={{
          img: CustomImg
        }}
      />
    </div>
  );
};
export default RenderPage;

方案优势 #

• 渲染阶段就完成src预处理，不会触发无效的原始路径资源请求，完全避免404报错
• 符合loader的官方设计规范，不属于非标准hack实现
• 后续要扩展图片懒加载、点击预览、加载错误兜底等能力，直接在CustomImg组件中修改即可，可维护性极强

提示：如果有不需要加CDN的本地资源路径，也可以在CustomImg的逻辑里加额外的规则过滤。

内容的提问来源于stack exchange，提问作者Michael Lorton