score:2

Accepted answer

you could either encode the image data to base64 format and return it, which can then be used to display the image in html as shown here (e.g., <img src="data:image/png;base64, ...), or send the raw bytes, as you already do, and convert them into base64 format (using btoa(), string.fromcharcode() and uint8array) or blob object (and then call url.createobjecturl() to convert the blob into a url.) on client side. the below examples show how to achieve the last two methods, using axios library, which you seem to be using in your project, as well as fetch api.

using axios

option 1 - convert raw image bytes into blob

axios({
        method: 'post',
        url: '/upload',
        data: formdata,
        headers: {
            'content-type': 'multipart/form-data'
        },
        responsetype: "blob"
    })
    .then(response => {
        var bloburl = url.createobjecturl(response.data);
        var image = document.getelementbyid("myimage");
        image.onload = function(){
            url.revokeobjecturl(this.src); // release the blob url once the image is loaded
        }
        image.src = bloburl;
    })
    .catch(error => {
        console.error(error);
    });

option 2 - convert raw image bytes into base64 encoded string

axios({
        method: 'post',
        url: '/predict',
        data: formdata,
        headers: {
            'content-type': 'multipart/form-data'
        },
        responsetype: "arraybuffer"
    })
    .then(response => {
        base64string = btoa(string.fromcharcode(...new uint8array(response.data)))
        contenttype = response.headers['content-type']
        return base64string;
    })
    .then(base64string => {
        var image = document.getelementbyid("myimage");
        image.src = "data:" + contenttype + ";base64," + base64string;
    })
    .catch(error => {
        console.error(error);
    });

using fetch api

option 1 - convert raw image bytes into blob

fetch('/predict', {
        method: 'post',
        body: formdata,
    })
    .then(response => response.blob())
    .then(blob => {
        var bloburl = url.createobjecturl(blob);
        var image = document.getelementbyid("myimage");
        image.onload = function(){
            url.revokeobjecturl(this.src); // release the blob url once the image is loaded
        }
        image.src = bloburl;
    })
    .catch(error => {
        console.error(error);
    });

option 2 - convert raw image bytes into base64 encoded string

fetch('/predict', {
        method: 'post',
        body: formdata,
    })
    .then(response => {
        contenttype = response.headers.get('content-type')
        return response.arraybuffer();
    })
    .then(arraybuffer => {
        base64string = btoa(string.fromcharcode(...new uint8array(arraybuffer)))
        var image = document.getelementbyid("myimage");
        image.src = "data:" + contenttype + ";base64," + base64string;
    })
    .catch(error => {
        console.error(error);
    });

remember to define an <img> tag in your html file, where you wish to display the image:

 <img id="myimage" src="">

Related Query

More Query from same tag