VueJs render image objects inside array

Question

I want to convert image objects to base64 data url before render. The image object is inside an array i have store it first as shown below

        handleFileChange(e, index) {

            let file = e.target.files[0]
            console.log(file)
            let myFilesLength = this.form.files.length
            myFilesLength += 1
            if (myFilesLength == index) {

                this.form.files.push(file)
            } else {
                let html = '<div class="modal-cont"><h4>Please insert image in sequence.'+
                    '</h4><div class="alert__icon"><span></span></div></div>'
                Swal.fire({
                    customClass: {
                        popup: 'error-modal',
                    },
                    html: html,
                    showCloseButton: true,
                    allowOutsideClick: false,
                })
            }
            e.preventDefault()
        },

Then i have use this array in my html to show images that i had stored

<div class="tabs--custom__select">
            <div class="number__select-box" v-for="index in [0, 1 ,2 ,3 ,4 ,5 ,6 ,7]" :key="index">
                        <div class="number__select-inr">
                            <a href="javascript:void(0);" class="custom-images">
                                <h2 v-if="index < form.files.length">
                                    <img @click="addAnswer(form.files[index])" :src="convertBase64(form.files[index])">
                                </h2>
                                <h2 v-else>
                                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
                                </h2>
                            </a>
                        </div>
                    </div>
</div>

As you can see on img element src attribute i call another function to convert image object to base64 data url The function code i have shown below

        convertBase64(file) {

            const dataUrl = new Promise ((resolve, reject) => {

                var reader = new FileReader()
                reader.readAsDataURL(file)
                reader.onload = () => resolve(reader.result);
                reader.onerror = error => reject(error);
            })

            dataUrl.then(url => {
                return url
            }).catch(error => {
                console.log('error  '+ error)
            })
        },

But when i test my code it will render empty image like

Answer 1

You can use URL.createObjectURL(files[0]) generating url.

codepen - https://codepen.io/anon/pen/XGYoyr