markdown实时渲染外链图片的解决方案（未完成）

Wed, 06 Sep 2023 14:07:10 +0800

Markdown 本身并不支持实时渲染外链图片，但可以通过一些扩展库或工具来实现。

一种常用的方法是使用 JavaScript 库来实现。例如，可以使用 markdown-it 这个 JavaScript 库来将 Markdown 文本渲染为 HTML，并通过 markdown-it 的插件来加载外链图片。具体步骤如下：

1
2

import markdownIt from 'markdown-it';
import { MarkdownItHtml } from 'markdown-it-html';

const md = markdownIt({
  html: true,
  linkify: true,
  typographer: true,
}).use(MarkdownItHtml);

1
2

const markdown = '![alt text](http://example.com/image.jpg)';
const html = md.render(markdown);

这样，html 变量将包含渲染后的 HTML，其中外链图片将被转换为 <img> 标签。你可以将 html 变量插入到你的网页中，以便在浏览器中显示渲染后的结果。

需要注意的是，由于这种方法需要加载外链图片，因此可能会受到跨域限制。你需要确保外链图片的服务器允许跨域访问，或者使用代理等方法来绕过跨域限制。

外链图片 on 寻道之旅博客