Json Binary needs to convert into blob data as image

Question

I am calling an api where i am getting multiple binary data as json. later i want to convert binary data into blob image.

here i am create image src from response. But image is not showing with this src

const imageSrc = window.URL.createObjectURL(new Blob([response.data[0].blob))

<img src={imageSrc} />

[ { blob: "b'\\xff\\xd8\\xff\\xe0\\x00\\x10JFIF\\x00\\x01\\x file: "profile_c46c4978-a3f6-4f8a-95e0-b800a6a10b12" type: "image" }, { blob: "b'\\xff\\xd8\\xff\\xe0\\x00\\x10JFIF\\x00\\x01\\x file: "profile_c46c4978-a3f6-4f8a-95e0-b800a6a10b12" type: "image" } ] each blob value i wan to create image src link — Vinay, Mar 29 '22 at 05:09
Does your API provide a documentation regarding the encoding they use? They seem to encode only certain characters to hex and wrap it in some "command" (`b'`?) So [this](https://jsfiddle.net/7kruybh1/) should do with the small excerpt you did show, but without seeing the exact encoding they used, impossible to say it will work correctly or not. — Kaiido, Mar 29 '22 at 07:31

score -1 · Answer 1 · edited Mar 29 '22 at 14:48

-1

Do not use the Blob Class as fetch response already returns Blob

Try doing this

const imageSrc = window.URL.createObjectURL(response.data[0].blob)
<img src={imageSrc} />

edited Mar 29 '22 at 14:48

Tushar Roy

answered Mar 29 '22 at 05:54

Prasenjeet Symon

1 Answers1