Cherry Markdown 中外链图片加载问题的解决方案

在 Markdown 编辑器中处理外链图片时，经常会遇到因 Referer 策略限制导致图片无法加载的问题。本文将以 Cherry Markdown 为例，介绍如何通过配置解决这一常见问题。

问题背景

当从其他平台导出的 Markdown 文件包含外链图片时，这些图片可能会因为源站的 Referer 策略限制而无法正常加载。这是因为许多图片服务器会检查 HTTP 请求头中的 Referer 字段，如果不符合要求就会拒绝访问。

解决方案

Cherry Markdown 提供了一个优雅的解决方案：通过 beforeLoadOneImgCallback 回调函数在图片加载前动态修改其属性。

实现步骤

1. 配置回调函数：在 Cherry Markdown 的初始化配置中，设置 beforeLoadOneImgCallback 回调函数。

2. 修改图片属性：在回调函数中为图片元素添加 referrerpolicy="no-referrer" 属性。

3. 注意懒加载设置：确保 noLoadImgNum 设置为 0，否则回调可能不会触发。

技术原理

这种解决方案的核心在于：

• 利用了浏览器的 Referrer-Policy 特性
• 通过 Cherry Markdown 提供的钩子机制干预图片加载过程
• 在不修改原始 Markdown 内容的情况下实现功能增强

实际应用

这种技术不仅适用于解决 Referer 问题，还可以扩展用于：

• 图片懒加载优化
• 图片加载失败时的备用方案处理
• 图片加载前的预处理操作

总结

通过合理利用 Cherry Markdown 的回调机制，开发者可以灵活处理各种图片加载相关的特殊需求。这种方案既保持了 Markdown 的简洁性，又提供了足够的扩展能力来处理实际应用中的复杂场景。

对于开发者来说，理解并善用这类回调机制，可以显著提升 Markdown 编辑器在各种实际应用场景中的适应性和用户体验。