Image Not Loading?

[trig79]

Hey

Am I misunderstanding the instructions?
when I click the image icon here

I choose a picture from my local directory but nothing is rendered and the uploaded call back isn't triggered?

<template>
    <div>
        <medium-editor 
            v-model="content" 
            :options="options" 
            :onChange="onChange" 
            @uploaded="uploadCallback"
            :hideGist ="true"
             />
    </div>
</template>

<script>
import Editor from 'vuejs-medium-editor'

export default {
    name: 'ArticleWrite',
    data() {
        return {
            content: '',
            options: {
                toolbar: {
                    buttons: [
                        'bold',
                        'italic',
                        'underline',
                        'quote',
                        'h1',
                        'h2',
                        'h3',
                        //'pre',
                        'unorderedlist',
                        'orderedlist',
                        'justifyLeft',
                        'justifyCenter',
                        'justifyRight',
                        'anchor',
                        {
                                name: "image",
                                action: "image",
                                aria: "insert image from url",
                                tagNames: ["img"],
                                contentDefault: "<b>image</b>",
                                contentFA: '<i class="fa fa-picture-o"></i>'
                            }
                    ]
                },
            }
        }
    },
    components: {
        'medium-editor': Editor,
    },
    methods: {
        onChange() {
            console.log(this.content)
        },
        uploadCallback(url) {
            console.log('uploaded url', url)
        },
    },
}
</script>

<style scoped></style>

thanks in advance for any guidance

[manuelgeek]

Hello @trig79, the file uploader uses vue-upload-component package and you need to provide the options; uploadUrl - POST endpoint where image is saved, uploadUrlHeader and maybe file_size
The POST endpoint should return a {data: {link: 'image-link'}}
Or you could use imgur, like below in options

uploadUrl: 'https://api.imgur.com/3/image',
        uploadUrlHeader: { Authorization: 'Client-ID db856b43cc7f441' },
        file_input_name: 'image',
        file_size: 1024 * 1024 * 10,
        imgur: false,
        ```