Cant add Src with blob url or base64

[rickyanwar]

I am trying to add image manually but when using blob URL is not append in src, when I add ektension name ex let url = window.URL.createObjectURL(new Blob([res.data])) +'.jpg' its apppend in src

this,my code

 images.map(image => {                  
                    console.log(image.id)
                    this.$axios.get(this.$api_url + '/images/' + image.id, {
                                responseType: 'arraybuffer'
                        }).then(res => {
                            console.log(res)
                        let url = window.URL.createObjectURL(new Blob([res.data]))
                        let file = {
                            size: 123,
                            name: "Icon",
                            type: "image/png",
                        };
                        console.log(file)
                        this.images.push({
                            src: url,
                            id: image.id
                        });
                        this.$refs.imgDropzone.manuallyAddFile(file, url)

                    })

                })

[mahyar33]

I have the same problem

[helderferrari2]

same problem here, any solution?

[franck-grenier]

Hello, old one... but I found a solution.

Move on to rowanwins/vue-dropzone v3.7 so that base64 dataUrl will be accepted when manuallyAddFile :

npm install https://github.com/rowanwins/vue-dropzone.git#v3.7 --save

Then you can use the kind of function below to convert your blob to a base64 dataUrl with a FileReader : https://stackoverflow.com/a/30407959/243996

const blobToDataURL = (blob, callback, ...params) => {
    const fileReader = new FileReader();
    fileReader.onload = function (e) { callback(e.target.result, ...params); };
    fileReader.readAsDataURL(blob);
};

The thumbnail will accept and use the base64 URL to display your previews.