0

I am trying to use remark-embed-images to convert relative image path in markdown file to base64 string, but it throw image not exist and it seems searching file under c:\Users\Edward\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.1 instead of my current working directory.

Here is my testing code:

import * as vscode from 'vscode';
import {unified} from 'unified';
import remarkParse from 'remark-parse';
import remarkHtml from 'remark-html';
import remarkEmbedImages from 'remark-embed-images';

export class PreviewPanel {
    public static currentPanel: PreviewPanel | undefined;
    public static readonly viewType = 'preview';
    private readonly panel: vscode.WebviewPanel;
    private readonly extensionUri: vscode.Uri;
    private disposables: vscode.Disposable[] = [];
    private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri){
        this.panel = panel;
        this.extensionUri = extensionUri;
        this.panel.onDidDispose(() => this.dispose(), null, this.disposables);
    }
    public static createOrShow(extensionUri: vscode.Uri){
        const column = vscode.ViewColumn.Two; 
        if(!PreviewPanel.currentPanel){
            const panel = vscode.window.createWebviewPanel(
                PreviewPanel.viewType,
                'Preview',
                column || vscode.ViewColumn.Two,
                {
                    // Enable javascript in the webview
                    enableScripts: true,
                    retainContextWhenHidden: true,
                    // And restrict the webview to only loading content from our extension's `media` directory.
                    localResourceRoots: [vscode.Uri.joinPath(extensionUri, 'assets')]
                }
            );
            PreviewPanel.currentPanel = new PreviewPanel(panel, extensionUri);  
           
        }
        else if(!PreviewPanel.currentPanel.panel.visible){
            PreviewPanel.currentPanel.panel.reveal(column);  
        }
        PreviewPanel.currentPanel.update();
    }
    public async update() {
        const webview = this.panel.webview;
        // Vary the webview's content based on where it is located in the editor.
        switch (this.panel.viewColumn) {
            case vscode.ViewColumn.Two:
                await this.updateForPreview(webview);
                return;
            default:
                return;
        }
    }
    private async updateForPreview(webview: vscode.Webview) {
        this.panel.webview.html = await this.getHtmlForWebview(webview);
    }

    private async getHtmlForWebview(webview: vscode.Webview) {
        var md2Html = await this.markdownCompiler().process(vscode.window.activeTextEditor?.document.getText());
        return String(md2Html);
    }
    private markdownCompiler(): any {
        return unified()
            .use(remarkParse) 
            .use(remarkEmbedImages)           
            .use(remarkHtml);
    }
    
    public dispose() {
        PreviewPanel.currentPanel = undefined;

        // Clean up our resources
        this.panel.dispose();

        while (this.disposables.length) {
            const x = this.disposables.pop();
            if (x) {
                x.dispose();
            }
        }
    }
}
Edward
  • 28,296
  • 11
  • 76
  • 121

0 Answers0