0

I have the below Python code which renders an image from a SageMaker API endpoint in a Jupyter Notebook. This works fine.

python code

I am converting this to a web app, and I'm struggling to decode the image correctly in javascript.

My web app gets the image data response from Ruby like this:

    response_json = JSON.parse(response.body.string)
    response_json["images"].first

And this shows up in javascript like so:

javascript console debug

I try to render the image like this:

<img src={`data:image/jpeg;base64,${apiResponse['data']}`} />

Which produces a broken image in the browser:

broken image preview

I have tried these options so far:

<img src={`data:image/jpeg;base64,${apiResponse['data']}`} />
<img src={`data:image/png;base64,${apiResponse['data']}`} />
<img src={`data:image/png;base64,${btoa(apiResponse['data'])}`} />

Can someone please help me figure out what is going on in that Python base64.decodebytes and np.reshape/np.frombuffer code? And how to implement the same thing in javascript so I can render the image output?

Thank you

dtbaker
  • 4,679
  • 6
  • 28
  • 30
  • Your generated url in screenshot seems fine. Are you sure you are getting proper encoded data? You can test if your encoded data is valid [here](https://codebeautify.org/base64-to-image-converter) – Orifjon Aug 22 '23 at 05:25
  • Thanks @Orifjon, yea I get the same broken image over in that tool. Something to do with encoding is wrong somewhere. – dtbaker Aug 22 '23 at 06:03

0 Answers0