Unable to Dynamically Insert Images in Callback Function

[Jarvis4555]

Description:
I'm currently working with Froala Editor and encountered an issue when trying to dynamically insert images within a callback function. Specifically, I'm unable to get the base path of Froala Editor or specify a folder location where the editor can detect SVGs or GIFs. Here's a snippet of the callback function I'm using:

callback: function (val) {
    var editor = this;
    if (val === 'v1') {
        var imageUrl = './pi_1.gif';
        if (imageUrl) {
            var html = '<table><tr><td><img src="' + imageUrl + '" alt="Image"></td></tr></table>';
            editor.html.insert(html);
        }
    } else if (val === 'v2') {
        var imageUrl = './pi_2.gif';
        if (imageUrl) {
            var html = '<table><tr><td><img src="' + imageUrl + '" alt="Image"></td></tr></table>';
            editor.html.insert(html);
        }
    }
}

Issue: As you can see in the code above, I'm specifying image URLs relative to the current file (./pi_1.gif and ./pi_2.gif). However, I would like to know if there's a recommended way to get the base path of Froala Editor or specify a folder location where the editor can detect these images.

Request: Could you please provide guidance on how to dynamically insert images in Froala Editor's callback functions? Specifically, is there a way to get the base path of the editor or specify a folder location for image detection? Alternatively, any suggestions on how to handle this scenario effectively would be greatly appreciated.

Editor version:
4.2.0