How do I convert a stream retrieved from S3 bucket to use it as jpeg image in my React frontend?

Question

I have a very concrete problem that seems to be answered all over the internet, and yet I have now spent 2 days trying to solve it, and unfortunately I just cannot. Here's my problem:

• I have a number of jpeg files in a private S3 bucket. I want to keep it private and serve those files to my React frontend, so signed urls is not an option and making the bucket public is not an option.

• I have a node.js/express backend. I set up a route to retrieve a jpeg file from the S3 bucket using AWS SDK's function getObject(). No problems here, this part of the setup is working fine, so no need to delve further into this part.

• I then call this route with Axios from my React frontend. Then I get an object returned and my problem starts. The object I receive looks like this:

����JFIF���

.!!.)1(%(1)I9339ITGCGTf[[f�z����

.!!.)1(%(1)I9339ITGCGTf[[f�z������Jp"�����z��Rբ���@BD�"I$�mU�UR� ��D$�I$趭�UZR���/S�?g0 �BDI$�t[V��JQ@�����ז9��y��^� �DD"$�$�����T�)@(�;���0�k�����@@ AHDH�����Uj��������&l����� �!"I#�j�UUB���q��%�n�e�/ߠ��!"H�N�V�ҩJP(?�zL�� �uc�=���( A!"Io��Z�)J(�~7�u��z�<���?|�H@DB"$��F�V�UE(�����=Nݽ[7厝:y���1�w�P� `A!�D�7�V�QJR��㟝�z}�ݹ�vl���������}_����H�"H�mU�� U����痱��l���t�p��=Z|�6�Sd�@�"$H�t-���)E��´l��{v�ݻ��f:<��y������A��"I���J*��~]�?_�߳>������.]\z5x���}���DI$����TP(?�7O��f��ٷ��������<�;��@A

Etc, etc, the string is obviously much longer

From al the reading online I seem to understand this is a stream, and in order to be displayed as a jpeg image in my React frontend it needs to be converted to Base64, and the result of this conversion needs to be used as . Is this correct? I have tried a variation of solutions for this problem but none has worked. Here's an example I've tried, that is pretty similar to all the other solutions I've seen online, none of which has worked:

let buf = Buffer.from(rsp.data)
let base64 = buf.toString('base64')
let convImage = <img src={`data:image/*;base64,${rsp.data}`} alt='' />
// And then render convImage

I've spent so much time trying to solve this, and it seems like such an easy problem, but I just can't figure it out. I would appreciate any help to accomplish what I'm trying to do. Questions:

• Should my example above be working and why isn't it? What am I doing wrong and what am I not understanding?

• Am I misunderstanding the concepts and should I be doing this differently?

Thanks

Answer 1

I finally solved this one myself. The solution was in a different direction than most of the suggestions I had seen online, and I found it in this URL: https://simplernerd.com/js-image-binary-jfif/

I added these lines to my code, and the response I receive through Axios is now displayable as in my React frontend:

axiosClient.get(route, {responseType: 'blob', params})  // had to add responseType to the axios config
    
    .then((rsp) => {
        const url = URL.createObjectURL(rsp.data) // where rsp is the response
        var image = <img src={url} alt='' /> // <img/> can now use the url object to display the image, and var image can now be rendered by React            
    }

    .catch((err) => {
        console.log('Error receiving rsp')
    })