在 Preview 中，能否加载本地图片？

[charlestang]

我用 Electron + Vue3 在做一个客户端，里面嵌入了 md-editor，图片用的是 md 文件路径的相对路径。

![]("../../img/test.jpg")

生成的 html 类似

<img src="../../img/test.jpg"/>

在 preview 的时候，图片就都加载不出来。

在 Electron 的 main.js 里，我可以用 nodejs 读取图片的真实内容，我想知道，Preview 的时候，我有没有什么办法，把图片的内容
主动喂给 Preview，让它能正常展示图片？

不知道有没有兄弟进行过类似的尝试，麻烦指点一下迷津～谢谢🙏

[imzbf]

得知道页面和node能不能通信

可以改默认的图片转换逻辑，比如改成

<img data-src="../../img/test.jpg"/>

然后显示后遍历一遍图片标签，与node通信，将本地图片转为base64后再给img赋值，不过代价很大。

[charlestang]

可以通信的，这种方法我也想过，就是太麻烦了。我现在想的另一个方法就是用node直接在后台启动一个 http 服务，然后推算出 img 所在的网址，然后将 img 都替换成 http 协议的。不过这个也很麻烦。

[srkoiv]

main.js

import { config } from 'md-editor-v3';
config({
    markdownItConfig: (mdit, _options) => {
        mdit.renderer.rules.image = (tokens: any, idx: any, _options: any, _env: any, _self: any) => {
            let token = tokens[idx]
            return `<img src="${tokens.attrs[0][1]}" alt="${token.content}"  />`
        }
    }
});

修改一下mdit就好了