I'm using vue-quill into a project to let the user create contents. I need to modify the way that is used by quill to insert images into the DOM, I need that the images are uploaded on cloud storage and then into the dom is inserted an <img src="..."> tag with an url to the uploaded image and not a base64 image like it will occur by default.

At the moment I've this code in my component template

<template>
    <div class="col-sm-12 col-md-9 col-lg-9 p-0 mb-3" id="programEditorWrapper">
        <QuillEditor 
            ref="programEditor" 
            :options="options"
            theme="snow" content-type="html" 
            toolbar="full" 
            @update:content="$emit('update:content', $event)"
        >
        </QuillEditor>
    </div>
</template>

And in js part of the code I've started writing this code that will use an handler

<script>
import { store } from '@/store/index'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

export default {
    name: 'ProgramEditor',
    components: {
        QuillEditor
    },
    emits: [
        'update:content'
    ],
    data() {
        return {
            options: {
                modules: {
                    toolbar: {
                        handlers: {
                            image: this.imageHandler
                        }
                    }
                }
            }
        }
    },
    mounted() {
        this.$refs.programEditor.setHTML('')
    },
    methods: {
        imageHandler() {
            // this.$refs.programEditor.getModule("toolbar").addHandler("image", imgHandler)
            
        }
    }
}
</script>

What I don't underastand is how the handler works, I saw some example here and here and they will need to create a dynamic input file to use custom handler, what instead I need is to only upload the file and put it on the DOM into an img tag as a normal url.

Any suggestion or help please?