how do i convert a stream retrieved from s3 bucket to use it as a jpeg image in my react frontend?

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')
    })

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top