Is it possible to pass an image to the component as Base64?

[nickeblewis]

We already store images that have been uploaded to our app in Base64 format and they are shown in a grid format with two buttons beneath each, one for delete and the other for edit.

We are using the Vue wrapper, as our project is developed using the Vue framework.

Clicking on Edit launches a modal that contains the Image Editor but the problem is we don't wish to load from a file or URL but from Base64.

Is there a way of doing this?

Thanks!

[junghwan-park]

@nickeblewis
You can simply pass Base64 string to options.loadImage.path as URL.

Here is example code for TOAST UI Image Editor - Vue wrapper.

//...
import {ImageEditor} from '@toast-ui/vue-image-editor';

export default {
    components: {
        'tui-image-editor': ImageEditor
    },
    data() {
        return {
            useDefaultUI: true,
            options: {
                includeUI: {
                    loadImage: {
                         path: imageDataBase64, 
                         name: 'Your Base64 image'
                    }
                },
                cssMaxWidth: 700,
                cssMaxHeight: 500
            }
        }
    }
}
//...