Converting Axios returned image into something vue can display in <img>

Question

I ask for help from the community of stack overflow. Basically the long and short of the whole situation will be displayed below:

on a Vue page I am making a request to a Nodejs server using the code shown below
that node.js server is connecting to a Linux device and pulling an image off of it
that node.js server is then returning this image to the aforementioned Vue page

await axiosT({
            
    method: 'post',
    url: '{this is removed for security reasons}',
    data: {this is removed for security reasons},
    headers: {'Content-Type': 'application/x-www-form-urlencoded' },
    responseType: 'text',

}).then(function (response) {
                    
   console.log(response.data);

}

this executes without error, and I have had this response work in postman with it successfully displaying the retrieved image. upon receiving the image and console logging it. I am met with the jumble of crap shown below which I can only assume is the image in one form or another; however, as right now all attempts I have made to display the image in any way has at worst, not worked with zero error messages, or at best simply caused the to display the missing image icon

������JFIF�����`�`�����<CREATOR: gd-jpeg v1.0 (using IJG JPEG v80), quality = 100
���C��������������������������������������������������������������������C������������������������������������������������������������������������������������������������������������������ 
���������������������}��������!1A��Qa�"q�2����#B���R��$3br� 
�����%&'()*456789:CDEFGHIJST ... and so on and so on, etc etc you get the point

I am open to any suggestions, and if you need any further clarification on something, please don't be afraid to ask

Code-Apprentice · Accepted Answer · 2021-02-13 15:29:56Z

2

thanks for all of the comments, you were all able to help me solve it

below is the working code, changing the response type to arraybuffer and adding the code found within the .then() successfully converted the image into base64 where it could set a variable bound to my <img>'s src (as shown further below).

let image = null;

await axiosT({
                    
    method: 'post',
    url: '{this is removed for security reasons}',
    data: {this is removed for security reasons},
    headers: {'Content-Type': 'application/x-www-form-urlencoded' },
    responseType: 'arraybuffer',
                    
}).then(function (response) {

    try {

        image = ('data:image/jpeg;base64,' + btoa(
           new Uint8Array(response.data).reduce((data, byte) => data + 
           String.fromCharCode(byte), '')
        ));

    } catch (err) {

        console.log(err)

    }
                        
})

this.foo_image = image

<img :src="foo_image">

edited Feb 13, 2021 at 15:29

Code-Apprentice

84k26 gold badges162 silver badges289 bronze badges

answered Feb 13, 2021 at 7:47

GumnutMrKick

212 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yunnosch Over a year ago

With a "hickup" or two, you did well on grasping the idea of StackOverflow, by showing the solution you came up with based on a comment. Please take the tour to round that off nicely. Have fun.

Collectives™ on Stack Overflow

Converting Axios returned image into something vue can display in <img>

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related