Posts tagged with axios

I uploaded a photo via WhatsApp, which can be accessed via:

https://graph.facebook.com/v19.0/{imageId} 

Requesting this API returns the URL of the image:

{     "url": "https://lookaside.fbsbx.com/whatsapp_business/attachments/?mid={imageId}&ext={ext}&hash={hash}",     "mime_type": "image/jpeg",     "sha256": "fd9d5ac5bb84b8a0b7a3402c3a99ed9ff3e9fadb4fa567cd101eaf4923d2b375",     "file_size": 667836,     "id": "{imageId}",     "messaging_product": "whatsapp" } 

Then, accessing this URL by Postman successfully returns the image that I uploaded.

However, when I use Nodejs, it returns something that I cannot convert to an image to be displayed on browsers.

const url = (   await axios.get("https://graph.facebook.com/v19.0/{imageId}", {     headers: {       Authorization: `Bearer ${process.env.WHATSAPP_API_KEY}`,     },   }) ).data.url; const image = Buffer.from(   (     await axios.get(url, {       method: "GET",       headers: {         Authorization: `Bearer ${process.env.WHATSAPP_API_KEY}`,       },     })   ).data ).toString("base64"); console.log(image); // 77+977+977+977+9ABBKRklGAAEBAQBgAGAAAO+... 

This prints some base64-encoded string, but when I test it https://base64.guru/converter/decode/image here, it tells that the string represents an application/octet-stream data. Therefore, I cannot display the image in my Remix code.

<img src={`data:image/jpeg;base64,${image}`} /> // not working 

How can I appropriately retrieve the image as base64 from the API?