How can I convert the response coming from the api to image

Question

I have response coming from the api like attached image. I want to convert this response to the image. I have tried to convert this into base64 string but i am not able to do it as well.

Image of the response

api is like this:

          axios.get(`https://api.bamboohr.com/api/gateway.php/tadigital/v1/employees/2223/photo/large`, 
                { auth: {
                    username: 'xxxxxxxxxxxxxxxxx',
                    password: 'xxxxxxxxxxxxxxxxx'
                  }
                }
                ).then(resp => {
                  console.log(resp.data)
          });

I want the solution without using responseType in the get request because api is not accepting the response type. I am not getting a way to convert this to image

We can't see what the responded data looks like because the username and password provided is incorrect. I am not saying you should share the credentials just show as an example of what the responded data looks like — seriously, Nov 28 '22 at 12:22
Does this answer your question? [How to display an image that we received through Ajax call?](https://stackoverflow.com/questions/9511302/how-to-display-an-image-that-we-received-through-ajax-call) — Justinas, Nov 28 '22 at 12:22
@seriously seriously? It's inside image attached to question — Justinas, Nov 28 '22 at 12:23

score 0 · Answer 1 · answered Nov 28 '22 at 12:23

0

1 Encoding should be base64 you can do that on either on the server or the client.

2 The Raw data should be set as the following -

    <img ng-src="data:image/*;base64,{{Raw Binary Data}}"/>

answered Nov 28 '22 at 12:23

Delano van londen

398
1
19

By doing this it is directly adding the data to the src tag, the data which I have shared in the question in image – user17320926 Nov 28 '22 at 12:33

m.marian · Answer 2 · 2022-11-28T12:46:11.707

0

It seems like the server is sending raw data
You can convert it to blob by using fetch like below:

const res = await fetch(url);
const data = await res.blob();
const image = URL.createObjectURL(data);

Set Image as src of an image tag

edited Nov 28 '22 at 12:46

answered Nov 28 '22 at 12:37

m.marian

146
1
6

score 0 · Accepted Answer · answered Nov 28 '22 at 14:06

I want the solution without using responseType in the get request because api is not accepting the response type.

responseType has nothing to do with server. It tells Axios how to handle the expected response data. In this scenario you could pass responseType: "blob", which can be passed to URL.createObjectURL() to create an URL that can be used as <img> src.

const url = 'https://api.bamboohr.com/api/gateway.php/tadigital/v1/employees/2223/photo/large';
axios.get(url, {
  auth: {
    username: 'xxxxxxxxxxxxxxxxx',
    password: 'xxxxxxxxxxxxxxxxx',
  },
  responseType: 'blob',
}).then((resp) => {
  const img = document.createElement('img');
  img.src = URL.createObjectURL(resp.data);
  img.alt = 'employee photo';

  document.body.append(img);
});

const url = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K";

axios.get(url, {
  responseType: "blob",
}).then((resp) => {
  const img = document.createElement("img");
  img.src = URL.createObjectURL(resp.data);
  img.alt = "React icon";
  
  document.body.append(img);
}).catch((error) => {
  console.log(error);
});

<script crossorigin src="https://unpkg.com/axios@1/dist/axios.js"></script>

Note that you should call URL.revokeObjectURL() if you no longer need the URL.

Oh this worked, I was passing responseType before auth. But I tried same as yours and it worked. Thanks — user17320926, Nov 28 '22 at 15:16
It shouldn't matter if you pass `responseType` before or after `auth`, as long as you do NOT pass it IN `auth`. — 3limin4t0r, Nov 28 '22 at 15:19
I have one more issue with the cors one: "No 'Access-Control-Allow-Origin' header is present on the requested resource.". How can we solve this issue. In local I was using the cors unblock extension for test purpose. — user17320926, Nov 30 '22 at 05:55
@user17320926 If you have access to the server that is delivering the images, make sure the Access-Control-Allow-Origin is present for the response. If you don't have access to the server you can setup a proxy. Let your JavaScript send a request to your own server, then do the external request from the server and forward the response back to your front-end. See [XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header](https://stackoverflow.com/a/35553666/3982562) for a detailed explanation. — 3limin4t0r, Nov 30 '22 at 12:00

How can I convert the response coming from the api to image

3 Answers3